Vite多环境配置与打包：灵活高效的Vue开发工作流

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

• 🤖 洛可可白：个人主页

• 🔥 个人专栏：✅前端技术 ✅后端技术

• 🏠 个人博客：洛可可白博客

• 🐱 代码获取：bestwishes0203

• 📷 封面壁纸：洛可可白wallpaper

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中如何编写分页查询