🌟 前言
欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍
🤖 洛可可白：个人主页
🔥 个人专栏：✅前端技术 ✅后端技术
🏠 个人博客：洛可可白博客
🐱 代码获取：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中如何编写分页查询 |
