企业官网建设流程全解析

unibest环境变量管理：多环境配置实战指南

【免费下载链接】unibestunibest - 最好用的 uniapp 开发框架。unibest 是由 uniapp + Vue3 + Ts + Vite5 + UnoCss + WotUI 驱动的跨端快速启动模板，使用 VS Code 开发，具有代码提示、自动格式化、统一配置、代码片段等功能，同时内置了大量平时开发常用的基本组件，开箱即用，让你编写 uniapp 拥有 best 体验。项目地址: https://gitcode.com/feige996/unibest

在跨端开发项目中，你是否经常遇到这样的困扰：开发环境、测试环境、生产环境的API地址各不相同，每次切换环境都要手动修改配置，既麻烦又容易出错？unibest框架基于Vite构建，提供了一套完整的环境变量管理解决方案，让你轻松应对多环境配置挑战。

环境变量配置的核心问题

在真实的开发场景中，我们面临的环境配置问题通常包括：

• API地址差异：开发、测试、生产环境的服务器地址不同
• 平台适配需求：H5、小程序、APP等不同平台需要不同的配置
• 构建优化要求：不同环境下需要不同的代码压缩和调试配置
• 安全敏感信息：token密钥等敏感信息需要环境隔离

unibest环境变量体系架构

unibest采用Vite的环境变量系统，通过分层配置实现灵活的跨端管理：

环境配置文件优先级规则

实战配置：从零搭建多环境体系

第一步：创建环境配置目录

在项目根目录创建env文件夹，用于集中管理所有环境配置：

/env ├── .env # 全局默认配置 ├── .env.development # 开发环境配置 ├── .env.production # 生产环境配置 └── .env.local # 本地覆盖配置

第二步：配置核心环境变量

开发环境配置 (.env.development)：

# 应用基础配置 VITE_APP_TITLE=unibest开发版 VITE_SERVER_PORT=9000 VITE_SERVER_BASEURL=http://localhost:3000 VITE_APP_PROXY_ENABLE=true VITE_APP_PROXY_PREFIX=/api VITE_UPLOAD_BASEURL=http://localhost:3000/upload VITE_DELETE_CONSOLE=false # 微信小程序平台特定配置 VITE_SERVER_BASEURL__WEIXIN_DEVELOP=https://dev-api.example.com VITE_SERVER_BASEURL__WEIXIN_TRIAL=https://test-api.example.com VITE_SERVER_BASEURL__WEIXIN_RELEASE=https://api.example.com

生产环境配置 (.env.production)：

VITE_APP_TITLE=unibest正式版 VITE_SERVER_BASEURL=https://api.example.com VITE_APP_PROXY_ENABLE=false VITE_DELETE_CONSOLE=true

第三步：Vite配置集成

在vite.config.ts中正确加载环境变量：

export default defineConfig(({ command, mode }) => { // 加载指定模式的环境变量 const env = loadEnv(mode, path.resolve(process.cwd(), 'env')) const { VITE_APP_PORT, VITE_SERVER_BASEURL, VITE_APP_PROXY_ENABLE, VITE_APP_PROXY_PREFIX, } = env return { envDir: './env', // 指定环境文件目录 server: { port: Number.parseInt(VITE_APP_PORT, 10), proxy: JSON.parse(VITE_APP_PROXY_ENABLE) ? { [VITE_APP_PROXY_PREFIX]: { target: VITE_SERVER_BASEURL, changeOrigin: true, rewrite: path => path.replace( new RegExp(`^${VITE_APP_PROXY_PREFIX}`), '' ), }, } : undefined, }, } })

高级技巧：平台智能适配

动态API地址获取

在实际开发中，我们经常需要根据当前平台和环境动态获取API地址：

const getApiBaseUrl = () => { // H5平台使用标准配置 if (__UNI_PLATFORM__ === 'h5') { return import.meta.env.VITE_SERVER_BASEURL } // 微信小程序平台环境判断 if (__UNI_PLATFORM__ === 'mp-weixin') { const accountInfo = uni.getAccountInfoSync() const envVersion = accountInfo.miniProgram.envVersion // 根据小程序版本选择对应配置 const platformKey = `VITE_SERVER_BASEURL__WEIXIN_${envVersion.toUpperCase()}` return import.meta.env[platformKey] || import.meta.env.VITE_SERVER_BASEURL } return import.meta.env.VITE_SERVER_BASEURL }

类型安全的环境变量访问

为了避免在代码中直接使用import.meta.env可能出现的类型错误，建议创建工具函数：

export const env = { // 应用标题 get title(): string { return import.meta.env.VITE_APP_TITLE }, // API基础地址 get baseURL(): string { return import.meta.env.VITE_SERVER_BASEURL }, // 代理是否启用 get isProxyEnabled(): boolean { return import.meta.env.VITE_APP_PROXY_ENABLE === 'true' }, // 当前平台 get platform(): string { return __UNI_PLATFORM__ }, // 是否生产环境 get isProduction(): boolean { return import.meta.env.PROD } }

常见问题与解决方案

问题1：环境变量访问为undefined

症状：代码中访问import.meta.env.VITE_XXX返回undefined

解决方案：

• 确认环境变量以VITE_前缀开头
• 检查.env文件是否位于正确位置
• 重启开发服务器重新加载配置

问题2：多环境切换困难

症状：需要手动修改配置文件来切换环境

解决方案：使用mode参数指定环境

# 开发环境 pnpm dev:h5 --mode development # 生产环境 pnpm build:h5 --mode production

问题3：敏感信息泄露风险

症状：环境变量中包含数据库密码、API密钥等敏感信息

解决方案：

• 将.env.local添加到.gitignore
• 通过CI/CD平台注入敏感环境变量
• 使用环境变量加密工具

构建优化与性能调优

环境相关的代码压缩

根据环境变量配置不同的构建选项：

esbuild: { drop: import.meta.env.VITE_DELETE_CONSOLE === 'true' ? ['console', 'debugger'] : ['debugger'] }, build: { sourcemap: import.meta.env.VITE_SHOW_SOURCEMAP === 'true' }

最佳实践总结

通过unibest的环境变量管理系统，你可以实现以下目标：

核心优势

1. 开箱即用：unibest已内置完整的环境变量体系，无需额外配置
2. 跨端兼容：完美支持H5、小程序、APP等所有平台
3. 开发友好：TypeScript全面支持，IDE智能提示
4. 构建高效：根据环境变量自动优化构建输出

通过掌握unibest的环境变量管理，你将能够轻松应对复杂的跨端开发场景，显著提升开发效率和项目可维护性。无论是个人的小型项目还是企业级的大型应用，这套体系都能为你提供可靠的基础架构支持。

【免费下载链接】unibestunibest - 最好用的 uniapp 开发框架。unibest 是由 uniapp + Vue3 + Ts + Vite5 + UnoCss + WotUI 驱动的跨端快速启动模板，使用 VS Code 开发，具有代码提示、自动格式化、统一配置、代码片段等功能，同时内置了大量平时开发常用的基本组件，开箱即用，让你编写 uniapp 拥有 best 体验。项目地址: https://gitcode.com/feige996/unibest