Vite多环境配置与打包:灵活高效的Vue开发工作流
🌟 前言
欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍
🤖 洛可可白:个人主页
🔥 个人专栏:✅前端技术 ✅后端技术
🏠 个人博客:洛可可白博客
🐱 代码获取:bestwishes0203
📷 封面壁纸:洛可可白wallpaper
文章目录
- Vite多环境配置与打包:灵活高效的Vue开发工作流
- 1. 安装依赖
- 2. 配置环境变量
- 3. 应用环境变量
- 4. 运行和构建项目
- 🎉 往期精彩回顾
Vite多环境配置与打包:灵活高效的Vue开发工作流
Vite作为一个新兴的前端构建工具,提供了快速的冷启动、即时模块热更新以及真正的按需编译,极大地提高了Vue开发效率。本文将向你展示如何在Vite中设置多环境开发和打包,包括如何配置环境变量、如何应用这些变量以及如何根据不同的环境进行项目的构建。通过这些步骤,你可以确保在开发、测试和生产等不同阶段中,你的应用都能以最佳状态运行。无论你是Vite的新手还是希望优化现有工作流的开发者,本文都将为你提供实用的指导和建议。
1. 安装依赖
npm install --save-dev cross-env
2. 配置环境变量
在项目根目录下创建 .env
文件,分别为不同环境创建不同的环境变量配置。例如:
.env
:默认环境.env.development
:开发环境.env.production
:生产环境
在这些文件中,你可以设置不同的环境变量,例如 API 端点或其他服务的配置。
# .env
VITE_API_URL=https://api.example.com# .env.development
VITE_API_URL=http://localhost:3000# .env.production
VITE_API_URL=https://api.prod.example.com
3. 应用环境变量
在项目中,你可以通过 import.meta.env
访问这些环境变量。
// 在 Vue 组件或任何 JS 文件中
console.log(import.meta.env.VITE_API_URL);
4. 运行和构建项目
使用不同的环境变量运行和构建项目。在命令行中,你可以通过 --mode
选项指定环境。
# 开发环境
vite --mode development# 生产环境
vite build --mode production
或者,你可以在 package.json
的脚本中定义不同的命令,以便更方便地运行和构建。
// package.json
{"scripts": {"dev": "vite --mode development","build:dev": "vite build --mode development","build:prod": "vite build --mode production"}
}
然后,你可以使用 npm 或 yarn 运行这些脚本:
npm run dev
npm run build:dev
npm run build:prod
或者,如果你使用 Yarn:
yarn dev
yarn build:dev
yarn build:prod
通过这种方式,你可以轻松地在不同的环境之间切换,并针对不同的环境进行开发和打包。记得在部署到生产环境之前,使用生产环境的配置进行构建,以确保所有的环境变量和优化都已正确设置。
如果对你有帮助,点赞👍、收藏💖、关注🔔是我更新的动力!👋🌟🚀
🎉 往期精彩回顾
Windows Edge 兼容性问题修复:提升用户体验的关键步骤 |
---|
Vue2和Vue3组件通信:父子与兄弟间的桥梁 |
无缝集成:使用Spring Boot和Vue实现头像上传与回显功能 |
前端开发全景指南:语言与框架的精粹 |
C语言开发实战:使用EasyX在Visual Studio 2022中创建井字棋游戏 |
前端与后端协同:实现Excel导入导出功能 |
Java日期格式化:掌握时间的艺术 |
正则表达式完全指南:语法、用法及JavaScript实例 |
正则表达式与JSON序列化:去除JavaScript对象中的下划线键名 |
探索async/await的魔力:简化JavaScript异步编程 |
JavaScript日期格式化:从原始值到用户友好的字符串 |
入门教程:Windows搭建C语言和EasyX开发环境 |
CentOS系统下Docker的安装教程 |
Spring Boot单元测试全指南:使用Mockito和AssertJ |
Yarn简介及Windows安装与使用指南 |
H5实现3D旋转照片墙教程 |
Element-Plus 实现动态渲染图标教程 |
MyBatis-Plus分页接口实现教程:Spring Boot中如何编写分页查询 |
相关文章:
Vite多环境配置与打包:灵活高效的Vue开发工作流
🌟 前言 欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍 &#x…...
从零实现诗词GPT大模型:数据集介绍和预处理
专栏规划: https://qibin.blog.csdn.net/article/details/137728228 本章将介绍该系列文章中使用的数据集,并且编写预处理代码,处理成咱们需要的格式。 一、数据集介绍 咱们使用的数据集名称是chinese-poetry,是一个在github上开源的中文诗…...
45.HarmonyOS鸿蒙系统 App(ArkUI)创建列表(List)
列表是一种复杂的容器,当列表项达到一定数量,内容超过屏幕大小时,可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集,例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求(如通讯录、音乐列…...
推荐算法之协同过滤
算法原理 透过百科,我们了解到协同过滤推荐(Collaborative Filtering recommendation)是在信息过滤和信息系统中正迅速成为一项很受欢迎的技术。与传统的基于内容过滤直接分析内容进行推荐不同,协同过滤算法结合用户行为分析用户…...
Kotlin 面试题
lifecycleScope.launchWhenResumed launchWhenResumed是一个扩展函数,它是LifecycleCoroutineScope的一部分,并且它是在Android的Lifecycle库中引入的。 这个函数的主要目的是在Lifecycle的对应组件(通常是Activity或Fragment)处于“resumed”状态时启动协程。 public fun …...
TCM(Tightly Coupled Memory)紧密耦合存储器简介
在ARM Cortex处理器中,TCM通常指的是紧密耦合存储器(Tightly Coupled Memory)。TCM是一种位于处理器核心旁边的高速存储器,它的设计目的是为了提供低延迟和高带宽的内存访问性能。 TCM的特点是它与处理器内核紧密耦合,…...
《自动机理论、语言和计算导论》阅读笔记:p172-p224
《自动机理论、语言和计算导论》学习第 8 天,p172-p224总结,总计 53 页。 一、技术总结 1.Context-Free Grammar(CFG) 2.parse tree (1)定义 p183,But perhaps more importantly, the tree, known as a “parse tree”, when used in a …...
typescript playwright 笔记
录制调式 命令 npx playwright codegen url npx playwright codegen https://www.baidu.com/typescript 中 format 和 split 的使用 import * as util from util;const str1 hellow %s; const format util.format; const str2 format(str1, word);// 提取taskId const str3…...
从零实现诗词GPT大模型:了解Transformer架构
专栏规划: https://qibin.blog.csdn.net/article/details/137728228 这篇文档我们开始对GPT的核心组件Transformer进行一个详细的讲解, 加急编写中…...
温故知新之-TCP Keepalive机制及长短连接
[学习记录] 前言 TCP连接一旦建立,只要连接双方不主动 close ,连接就会一直保持。但建立连接的双方并不是一直都存在数据交互,所以在实际使用中会存在两种情况:一种是每次使用完,主动close,即短连接&…...
架构师系列-搜索引擎ElasticSearch(七)- 集群管理之分片
集群健康检查 Elasticsearch 的集群监控信息中包含了许多的统计数据,其中最为重要的一项就是集群健康,它在 status字段中展示为 green(所有主分片和副本分片都正常)、yellow(所有数据可用,有些副本分片尚未…...
基于Spring Boot实现的图书个性化推荐系统
基于Spring Boot实现的图书个性化推荐系统 开发语言:Java语言 数据库:MySQL工具:IDEA/Ecilpse、Navicat、Maven 系统实现 前台首页功能模块 学生注册 登录 图书信息 个人信息 管理员功能模块 学生管理界面图 图书分类管理界面图 图书信息管…...
安全加速SCDN带的态势感知能为网站安全带来哪些帮助
随着安全加速SCDN被越来越多的用户使用,很多用户都不知道安全加速SCDN的态势感知是用于做什么的,德迅云安全今天就带大家来了解下什么是态势感知,态势感知顾名思义就是对未发生的事件进行预知,并提前进行防范措施的布置࿰…...
java面向对象.day21(继承02--super)
说明 super父 this当前 使用super时,首先要继承父类,其次是在子类里面才能使用super。 继承父类后,运行子类时会同时调用父类的构造方法,如果要显性调用父类的构造方法必须在子类的第一行调用。 单使用super()表示调用父类构造…...
【数据结构】4.List的介绍
目录 1.什么是List 2.常见接口介绍 3.List的使用 1.什么是List 在集合框架中,List是一个接口,继承自Collection。 Collection也是一个接口,该接口中规范了后序容器中常用的一些方法,具体如下: Iterable也是一个接口…...
acwing算法提高之图论--最近公共祖先
目录 1 介绍2 训练 1 介绍 本博客用来记录"对于有根图中,求最近公共祖先"的题目。 求解方法: 向上标记法。每次求两个结点的最近公共祖先的时间复杂度是O(N)。由于时间复杂度较高,通常不用。倍增法。 倍增法重要思路࿱…...
C语言 函数——断言与防御式编程
目录 如何确定假设的真假? 断言 防御式编程(Defensive programming) 如何确定假设的真假? 程序中的假设 *某个特定点的某个表达式的值一定为真 *某个特定点的某个表达式的值一定位于某个区间等 问题:如何确定这些…...
【opencv】示例-travelsalesman.cpp 使用模拟退火算法求解旅行商问题
// 载入 OpenCV 的核心头文件 #include <opencv2/core.hpp> // 载入 OpenCV 的图像处理头文件 #include <opencv2/imgproc.hpp> // 载入 OpenCV 的高层GUI(图形用户界面)头文件 #include <opencv2/highgui.hpp> // 载入 OpenCV 的机器学习模块头文件 #includ…...
【linux深入剖析】深入理解软硬链接 | 动静态库的制作以及使用
🍁你好,我是 RO-BERRY 📗 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 🎄感谢你的陪伴与支持 ,故事既有了开头,就要画上一个完美的句号,让我们一起加油 目录 1.理解软硬链接1.1 操作观…...
xss常用标签和触发事件
无过滤情况 <script> <scirpt>alert("xss");</script> <img> 图片加载错误时触发 <img src"x" οnerrοralert(1)> <img src"1" οnerrοreval("alert(xss)")> 鼠标指针移动到元素时触发 <im…...
WPF中Binding的原理和应用
WPF中Binding的原理和应用 在WPF中,Binding机制是实现数据与界面的连接和同步的重要工具。了解Binding的原理和应用,对于开发人员来说是非常重要的。本文将详细介绍WPF中Binding的原理和应用,帮助读者更好地理解和运用这一强大的机制。 Bin…...
探索设计模式的魅力:深度挖掘响应式模式的潜力,从而精准优化AI与机器学习项目的运行效能,引领技术革新潮流
🌈 个人主页:danci_ 🔥 系列专栏:《设计模式》 💪🏻 制定明确可量化的目标,坚持默默的做事。 挖掘响应式模式,优化AI与机器学习项目性能,引领技术新潮流 ✨机器学习界的…...
《经典论文阅读2》基于随机游走的节点表示学习—Deepwalk算法
word2vec使用语言天生具备序列这一特性训练得到词语的向量表示。而在图结构上,则存在无法序列的难题,因为图结构它不具备序列特性,就无法得到图节点的表示。deepwalk 的作者提出:可以使用在图上随机游走的方式得到一串序列&#x…...
Java实现二叉树(下)
1.前言 http://t.csdnimg.cn/lO4S7 在前文我们已经简单的讲解了二叉树的基本概念,本文将讲解具体的实现 2.基本功能的实现 2.1获取树中节点个数 public int size(TreeNode root){if(rootnull){return 0;}int retsize(root.left)size(root.right)1;return ret;}p…...
Hello 算法10:搜索
https://www.hello-algo.com/chapter_searching/binary_search/ 二分查找法 给定一个长度为 n的数组 nums ,元素按从小到大的顺序排列,数组不包含重复元素。请查找并返回元素 target 在该数组中的索引。若数组不包含该元素,则返回 -1 。 # 首…...
常见分类算法详解
在机器学习和数据科学的广阔领域中,分类算法是至关重要的一环。它广泛应用于各种场景,如垃圾邮件检测、图像识别、情感分析等。本文将深入剖析几种常见的分类算法,帮助读者理解其原理、优缺点以及应用场景。 一、K近邻算法(K-Nea…...
推送恶意软件的恶意 PowerShell 脚本看起来是人工智能编写的
威胁行为者正在使用 PowerShell 脚本,该脚本可能是在 OpenAI 的 ChatGPT、Google 的 Gemini 或 Microsoft 的 CoPilot 等人工智能系统的帮助下创建的。 攻击者在 3 月份的一次电子邮件活动中使用了该脚本,该活动针对德国的数十个组织来传播 Rhadamanthy…...
微服务之Consul 注册中心介绍以及搭建
一、微服务概述 1.1单体架构 单体架构(monolithic structure):顾名思义,整个项目中所有功能模块都在一个工程中开发;项目部署时需要对所有模块一起编译、打包;项目的架构设计、开发模式都非常简单。 当项…...
MES生产管理系统:私有云、公有云与本地化部署的比较分析
随着信息技术的迅猛发展,云计算作为一种新兴的技术服务模式,已经深入渗透到企业的日常运营中。在众多部署方式中,私有云、公有云和本地化部署是三种最为常见的选择。它们各自具有独特的特点和适用场景,并在不同程度上影响着企业的…...
【core analyzer】core analyzer的介绍和安装详情
目录 🌞1. core和core analyzer的基本概念 🌼1.1 coredump文件 🌼1.2 core analyzer 🌞2. core analyzer的安装详细过程 🌼2.1 方式一 简单但不推荐 🌼2.2 方式二 推荐 🌻2.2.1 安装遇到…...
婚纱设计网站首页/电话营销系统
面试中最难回答的一个问题:你的优点和缺点分别是什么? 面对这个问题,很多人自作聪明的会把自己的优点当做缺点去说,比如:我最大的优点是认真,我最大的缺点就是太认真了。 这么回答只会让面试官觉得你是在装…...
做电子芯片的有那些交易网站/优化大师免费下载安装
本文主要向大家介绍了VC编程之VS error C1083: 无法打开包括文件:“gl\glew.h”: No such file or directory\,通过具体的内容向大家展示,希望对大家学习VC编程有所帮助。大家在使用#include 时经常会出现下面的错误:error C1083: 无法打开包…...
网站建设是不是可以免费建站/网站排名点击工具
一个非常简单的方案: 到这个地址: http://pkgs.org/download/libstdc或者网上搜索libstdc-4.7.2-2下载个libstdc-4.7.2-2.fc17.i686.rpm ( 我的是 libstdc-4.7.2-8.fc18.x86_64.rpm)rpm -ivh 安装期间出现了一个小问题࿱…...
福州公司注册代办营业执照/旺道seo网站优化大师
江西省教育考试院高考成绩查询系统入口2021http://www.jxeea.cn 江西省教育考试院网站是2021江西高考官方网站,http//wwwjxeeacn江西教育考试院提供2021江西高考报名、江西高考志愿填报、2021江西高考成绩查询查分系统、2021江西高考录取分数线结果查询系统等17.考试…...
手机app制作报价/百度seo网站优化 网络服务
<%# Eval("id") %>Bind方式 <%# Bind("id","~/info.aspx?id{0}") %>推荐使用第一种方式,可以在一个<%# %>里放入多个绑定,而第二种只能如此绑定一个值<%# Eval("id") ":" …...
有哪些网站用java做的/apple私人免费网站怎么下载
混合云被称为是企业信息化的未来,但是对于大多数企业来说,混合云落地难点重重。如何跨越各种挑战,解决企业信息化的最后一公里问题?本文提炼了混合云落地的几大关键点。1、体系架构无论微服务、UI还是脚本配置,花足够的…...