vue-vben-admin多环境配置：开发、测试与生产环境隔离-优快云博客

vue-vben-admin多环境配置：开发、测试与生产环境隔离

【免费下载链接】vue-vben-admin 项目地址: https://gitcode.com/gh_mirrors/vue/vue-vben-admin

你是否还在为开发环境的API地址提交到生产环境而头疼？是否因测试环境的配置与生产环境混淆导致线上故障？本文将带你一文掌握vue-vben-admin的多环境隔离方案，通过简单配置实现开发、测试、生产环境的无缝切换。读完你将学会：环境配置文件的创建方法、命令行切换技巧、环境变量的正确使用，以及如何通过配置文件实现不同环境的参数隔离。

环境配置基础架构

vue-vben-admin采用Vite的环境变量机制，结合自定义配置文件实现多环境隔离。核心配置体系由三部分组成：

1. 环境变量文件

项目根目录下通过不同后缀名的.env文件区分环境：

开发环境：.env.development（默认未创建，需手动添加）
测试环境：.env.test（默认未创建，需手动添加）
生产环境：.env.production（默认未创建，需手动添加）

这些文件中定义的变量需以VITE_为前缀才能被Vite识别，例如：

VITE_GLOB_API_URL=http://dev-api.vbenadmin.com
VITE_GLOB_APP_TITLE=VueVbenAdmin-开发环境

2. 构建命令配置

package.json中已预设多环境构建命令，关键配置如下：

命令	环境	用途
`pnpm dev`	开发环境	本地开发调试，使用`.env.development`
`pnpm build`	生产环境	正式环境打包，使用`.env.production`
`pnpm build:test`	测试环境	测试环境打包，使用`.env.test`
`pnpm build:analyze`	分析模式	构建包体积分析，基于生产环境配置

3. 环境工具函数

src/utils/env.ts提供了环境判断和变量获取的核心方法：

getEnv()：获取当前环境模式（development/test/production）
isDevMode()：判断是否为开发环境
getAppEnvConfig()：获取应用环境配置，自动读取对应.env文件的变量

从零开始配置多环境

步骤1：创建环境变量文件

在项目根目录创建以下三个文件：

开发环境配置（.env.development）

# 应用标题
VITE_GLOB_APP_TITLE=VueVbenAdmin-开发环境
# API基础地址
VITE_GLOB_API_URL=http://localhost:3000
# API请求前缀
VITE_GLOB_API_URL_PREFIX=/basic-api
# 上传地址
VITE_GLOB_UPLOAD_URL=http://localhost:3000/upload

测试环境配置（.env.test）

VITE_GLOB_APP_TITLE=VueVbenAdmin-测试环境
VITE_GLOB_API_URL=http://test-api.vbenadmin.com
VITE_GLOB_API_URL_PREFIX=/basic-api
VITE_GLOB_UPLOAD_URL=http://test-api.vbenadmin.com/upload

生产环境配置（.env.production）

VITE_GLOB_APP_TITLE=VueVbenAdmin
VITE_GLOB_API_URL=https://api.vbenadmin.com
VITE_GLOB_API_URL_PREFIX=/basic-api
VITE_GLOB_UPLOAD_URL=https://api.vbenadmin.com/upload

步骤2：配置开发环境代理

开发环境通常需要代理API请求以解决跨域问题，修改vite.config.ts的server.proxy配置：

// vite.config.ts 第17-34行
server: {
  proxy: {
    '/basic-api': {
      target: 'http://localhost:3000', // 开发环境API服务
      changeOrigin: true,
      ws: true,
      rewrite: (path) => path.replace(new RegExp(`^/basic-api`), ''),
    },
    '/upload': {
      target: 'http://localhost:3000/upload', // 开发环境上传服务
      changeOrigin: true,
      ws: true,
      rewrite: (path) => path.replace(new RegExp(`^/upload`), ''),
    },
  },
  open: true, // 自动打开浏览器
}

步骤3：使用环境变量

在代码中通过src/utils/env.ts提供的getAppEnvConfig()函数获取环境变量：

import { getAppEnvConfig } from '@/utils/env';

const { VITE_GLOB_API_URL, VITE_GLOB_APP_TITLE } = getAppEnvConfig();

// 示例：配置Axios基础地址
axios.defaults.baseURL = VITE_GLOB_API_URL;

// 示例：设置页面标题
document.title = VITE_GLOB_APP_TITLE;

环境隔离最佳实践

1. 配置文件分离

将环境相关的配置集中管理，推荐创建以下目录结构：

src/settings/
├── env/
│   ├── development.ts  # 开发环境特有配置
│   ├── test.ts         # 测试环境特有配置
│   └── production.ts   # 生产环境特有配置
└── projectSetting.ts   # 通用项目配置

在src/settings/projectSetting.ts中根据环境动态导入配置：

import { isDevMode } from '@/utils/env';
import devSettings from './env/development';
import prodSettings from './env/production';

const setting = isDevMode() ? devSettings : prodSettings;

export default setting;

2. 环境判断应用场景

在实际开发中，可根据环境执行不同逻辑：

import { isDevMode, isProdMode } from '@/utils/env';

if (isDevMode()) {
  // 开发环境：启用Mock数据
  import('@/mock/_createProductionServer').then(({ createServer }) => {
    createServer();
  });
}

if (isProdMode()) {
  // 生产环境：启用错误监控
  import('@/logics/error-handle').then(({ setupErrorHandle }) => {
    setupErrorHandle();
  });
}

3. 环境切换命令速查

操作	命令	说明
启动开发环境	`pnpm dev`	自动加载`.env.development`
构建测试环境	`pnpm build:test`	生成测试环境包，输出到`dist/`
预览测试环境	`pnpm preview --mode test`	本地预览测试环境构建结果
构建生产环境	`pnpm build`	生成生产环境包，输出到`dist/`

环境配置常见问题

1. 环境变量不生效？

确保变量名以VITE_开头
重启开发服务器（pnpm dev）使配置生效
检查是否在代码中正确使用getAppEnvConfig()获取

2. 如何添加自定义环境？

如需添加预发布环境（staging）：

创建.env.staging文件
在package.json添加命令：
"build:staging": "cross-env NODE_OPTIONS=--max-old-space-size=8192 pnpm vite build --mode staging"

3. 开发与生产环境样式差异？

可通过src/design/theme.less根据环境变量定义不同主题：

// 开发环境主题变量
@dev-primary-color: #F53F3F;
// 生产环境主题变量
@prod-primary-color: #1890FF;

// 根据环境切换
:root {
  --primary-color: v-bind('isDevMode() ? @dev-primary-color : @prod-primary-color');
}

总结与展望

通过本文介绍的多环境配置方案，你已掌握：

基于.env文件的环境变量管理
使用package.json命令切换环境
通过src/utils/env.ts实现环境判断
环境隔离的最佳实践与常见问题解决

建议团队建立统一的环境配置规范，包括：

环境变量命名规范（如VITE_API_XXX表示API相关）
必选环境变量清单（附默认值）
配置文件模板（可提交到Git）

通过规范的多环境配置，不仅能避免环境参数混淆导致的线上问题，还能大幅提升团队协作效率。立即按照本文步骤配置你的项目环境，体验无缝切换开发、测试与生产环境的顺畅开发流程！

提示：环境配置文件建议添加到.gitignore中，只提交模板文件（如.env.example），避免敏感信息泄露。

【免费下载链接】vue-vben-admin 项目地址: https://gitcode.com/gh_mirrors/vue/vue-vben-admin

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考