vue3 build如何区分dev ,test,prod的配置文件

在 Vue 3 Vite 的项目中区分 dev、test、prod 环境的标准做法是使用环境变量文件和构建模式。这套方案非常成熟核心思路是为不同环境准备独立的配置文件并通过--mode参数让构建工具在打包时自动加载对应的配置。1. 创建环境变量文件在项目的根目录下创建以.env.开头的文件。文件名中的development、test、production就对应了不同的模式mode。text# 项目根目录 .env.development # 开发环境 .env.test # 测试环境 .env.production # 生产环境然后在对应的文件中以VITE_为前缀定义你的变量。只有这个前缀的变量才会暴露给客户端代码这是出于安全考虑防止敏感信息泄露。.env.development示例:propertiesNODE_ENVdevelopment VITE_APP_TITLE开发环境 VITE_APP_API_BASE_URL/dev-api.env.test示例:propertiesNODE_ENVtest VITE_APP_TITLE测试环境 VITE_APP_API_BASE_URL/test-api.env.production示例:propertiesNODE_ENVproduction VITE_APP_TITLE生产环境 VITE_APP_API_BASE_URL/prod-api2. 在代码中使用环境变量在你的 Vue 组件或 JavaScript/TypeScript 文件中可以通过import.meta.env对象来访问这些变量。javascript// 在任何 .vue 或 .ts 文件中 console.log(import.meta.env.VITE_APP_TITLE) // 输出会根据构建模式变化: 开发环境 / 测试环境 / 生产环境 // 常用的内置环境变量 console.log(import.meta.env.MODE) // 当前模式: development, test, production console.log(import.meta.env.DEV) // 是否为开发模式: true / false console.log(import.meta.env.PROD) // 是否为生产模式: true / false一个典型的应用场景就是在封装 Axios 时将baseURL设置为不同的环境变量。3. 在package.json中配置构建命令你需要为不同的构建场景配置不同的命令。关键就在于--mode参数它会告诉 Vite 去加载哪个环境文件。json{ scripts: { dev: vite, // 默认加载 .env.development build: vite build, // 默认加载 .env.production build:test: vue-tsc vite build --mode test, // 加载 .env.test用于测试环境打包 build:prod: vue-tsc vite build --mode production // 加载 .env.production } }4. 运行与构建配置完成后使用对应的命令即可开发调试运行npm run dev代码将使用开发环境的配置。测试环境打包运行npm run build:test会生成一个使用测试环境配置的部署包。生产环境打包运行npm run build:prod或npm run build将使用生产环境配置进行构建。⚠️ 几个关键点NODE_ENV和MODE是两回事NODE_ENV是 Node.js 的传统环境变量影响构建行为如是否压缩代码而MODE是 Vite 用来匹配.env.[mode]文件的。通过--mode传参可以同时控制这两者。环境变量是字符串所有从import.meta.env读取的变量都是字符串。如果需要布尔值或数字需要手动转换。VITE_前缀是必须的这是 Vite 的安全机制确保只有以VITE_开头的变量才会被暴露给前端代码避免将服务器敏感信息打包到客户端。 备选方案在一些更灵活或没有 CI/CD 的场景下也有人会使用一个专门的config.ts文件通过判断import.meta.env.MODE来导出不同配置或者在代码里用一个对象来存放所有环境的配置。不过推荐使用 Vite 官方推荐的.env.[mode]文件方式它更规范也更容易维护。