JeecgBoot项目中Vue3多环境打包配置指南

在JeecgBoot前端开发过程中，我们经常需要针对不同环境（开发、测试、生产）进行打包部署。本文将详细介绍如何在JeecgBoot项目中配置Vue3的多环境打包方案，特别是如何正确打包测试环境版本。

环境变量配置原理

Vue3项目基于Vite构建工具，其环境变量机制遵循以下规则：

1. 环境变量文件命名格式为.env.[mode]，其中[mode]对应打包时指定的模式
2. 默认情况下，Vite支持development（开发）和production（生产）两种模式
3. 可以通过创建自定义.env文件和指定打包模式来扩展其他环境

具体配置步骤

1. 创建环境变量文件

在项目根目录下创建测试环境配置文件.env.test，内容示例：

NODE_ENV=production
VITE_APP_ENV=test
VITE_API_BASE_URL=/api-test

2. 修改打包命令

在package.json中配置测试环境打包命令：

"scripts": {
  "build:test": "vite build --mode test"
}

3. 处理常见问题

问题1：打包后仍显示生产环境内容

解决方案：

• 确保.env.test文件中的NODE_ENV设置为production
• 检查打包命令是否正确指定了--mode test参数
• 删除dist目录后重新打包

问题2：环境变量未生效

解决方案：

• 确认变量名以VITE_开头（Vite特有要求）
• 检查变量在代码中的引用方式是否正确

最佳实践建议

1. 环境隔离：为每个环境创建独立的.env文件，如.env.dev、.env.test、.env.prod

2. 变量命名规范：

   • 使用统一前缀VITE_便于管理
   • 采用大写字母和下划线的命名方式

3. 构建优化：

   • 测试环境可保留sourcemap便于调试
   • 生产环境应启用代码压缩和Tree-shaking

4. 部署验证：

   • 在打包后检查dist目录中的内容
   • 通过控制台输出确认当前环境变量

高级配置技巧

对于更复杂的场景，可以在vite.config.js中根据环境动态配置：

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  
  return {
    define: {
      __APP_ENV__: JSON.stringify(env.VITE_APP_ENV)
    },
    // 其他配置...
  }
}

通过以上配置，JeecgBoot项目可以灵活支持多环境打包需求，满足开发、测试和生产环境的差异化部署要求。