在 Vue 3 + Vite 的项目中，区分 dev、test、prod 环境的标准做法是使用环境变量文件和构建模式。
这套方案非常成熟，核心思路是：为不同环境准备独立的配置文件，并通过--mode参数让构建工具在打包时自动加载对应的配置。
1. 创建环境变量文件
在项目的根目录下，创建以.env.开头的文件。文件名中的development、test、production就对应了不同的模式（mode）。
text
# 项目根目录 .env.development # 开发环境 .env.test # 测试环境 .env.production # 生产环境
然后，在对应的文件中，以VITE_为前缀定义你的变量。只有这个前缀的变量才会暴露给客户端代码，这是出于安全考虑，防止敏感信息泄露。
.env.development示例:
properties
NODE_ENV='development' VITE_APP_TITLE='开发环境' VITE_APP_API_BASE_URL='/dev-api'
.env.test示例:
properties
NODE_ENV='test' VITE_APP_TITLE='测试环境' VITE_APP_API_BASE_URL='/test-api'
.env.production示例:
properties
NODE_ENV='production' VITE_APP_TITLE='生产环境' VITE_APP_API_BASE_URL='/prod-api'
2. 在代码中使用环境变量
在你的 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]文件方式，它更规范，也更容易维护。
