vue3+vite 多个环境配置

### Vue3 + Vite 配置生产与测试环境的最佳实践 在实际开发过程中，为了满足不同阶段的需求（如开发、测试和生产），通常需要对项目进行多环境配置。以下是基于 Vue3 和 Vite 的最佳实践方法。 #### 1. 创建 `.env` 文件 根据不同环境需求，分别创建对应的 `.env` 文件来存储特定的环境变量： - **`.env.development`**: 开发环境下的配置。 - **`.env.test`**: 测试环境下的配置。 - **`.env.production`**: 生产环境下的配置。 这些文件应放置于项目的根目录下[^1]。 #### 2. 配置具体的环境变量 在每个 `.env` 文件中定义所需的环境变量。例如： ##### .env.development ```plaintext VITE_APP_ENV=development VITE_API_URL=http://localhost:8080/api ``` ##### .env.test ```plaintext VITE_APP_ENV=test VITE_API_URL=https://test-api.example.com/api ``` ##### .env.production ```plaintext VITE_APP_ENV=production VITE_API_URL=https://api.example.com/api ``` 注意：所有以 `VITE_` 开头的变量会被自动注入到客户端代码中。 #### 3. 使用环境变量 在项目中的 JavaScript 或 TypeScript 文件里可以通过 `import.meta.env` 来访问已定义的环境变量。例如： ```javascript console.log(import.meta.env.VITE_APP_ENV); // 输出当前环境名称 console.log(import.meta.env.VITE_API_URL); // 输出 API 地址 ``` #### 4. 定义脚本命令 在 `package.json` 中设置用于启动不同环境的脚本命令： ```json { "scripts": { "dev": "vite", "build:test": "vite build --mode test", "build:prod": "vite build --mode production" } } ``` 执行以下命令可以切换至对应模式： - 运行开发服务器：`npm run dev` - 构建测试版本：`npm run build:test` - 构建生产版本：`npm run build:prod` #### 5. 结合移动端布局优化 如果项目是一个移动端应用，还可以参考类似的 H5 模板（如 vite-vue3-h5）。该模板集成了 Vue3、Vite2、Vant3 和 TypeScript，并支持 vw/rem 布局[^3]。这有助于进一步提升用户体验的一致性和适配能力。 --- ### 总结 通过上述步骤，可以在 Vue3 和 Vite 项目中实现高效且灵活的多环境管理方案。合理利用 `.env` 文件以及 `--mode` 参数能够显著简化跨环境部署流程并减少潜在错误的发生概率。 ---