Vue3项目在Jeecg-Boot中如何构建测试环境包

背景介绍

在Vue3项目开发过程中，我们通常需要针对不同环境（开发、测试、生产）构建不同的包。Jeecg-Boot作为一个基于Vue3的企业级开发框架，默认提供了开发和生产环境的构建配置，但有时我们需要单独构建测试环境包以满足测试需求。

环境配置原理

Vue3项目使用Vite作为构建工具，Vite支持通过--mode参数指定构建环境。环境变量文件遵循.env.[mode]命名规则，例如：

• .env.development - 开发环境
• .env.production - 生产环境
• .env.test - 测试环境

具体实现步骤

1. 创建测试环境配置文件

在项目根目录下创建.env.test文件，内容示例如下：

NODE_ENV=production
VITE_APP_ENV=test
VITE_GLOB_API_URL=/api
VITE_GLOB_UPLOAD_URL=/upload

2. 修改package.json脚本

在package.json的scripts节点中添加测试环境构建命令：

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

3. 执行构建命令

运行以下命令构建测试环境包：

npm run build:test

或者直接使用Vite命令：

vite build --mode test

常见问题解决

1. 构建报错问题：

   • 如果遇到构建错误，可以尝试删除dist目录后重新构建
   • 确保.env.test文件中的变量名称与代码中使用的一致

2. 环境变量使用： 在代码中可以通过import.meta.env访问环境变量，例如：

   const apiUrl = import.meta.env.VITE_GLOB_API_URL;
   

3. 多环境配置： 对于更复杂的环境需求，可以在vite.config.js中根据不同环境进行差异化配置：

   export default ({ mode }) => {
     const env = loadEnv(mode, process.cwd());
     return defineConfig({
       // 根据env配置不同参数
     });
   };
   

最佳实践建议

1. 为不同环境使用不同的API地址前缀
2. 测试环境可以启用更多的日志输出
3. 测试环境的sourcemap可以保留以便调试
4. 考虑使用不同的CDN路径或资源前缀区分环境

通过以上配置，Jeecg-Boot项目可以轻松实现测试环境的独立构建，满足测试团队的部署需求，同时保持与开发和生产环境的隔离。