vue3 要区分生产环境和测试环境，请求不同的后端接口，如何统一配置管理

chatGPT QA 日志

---

在Vue 3中，你可以使用环境变量和Webpack配置来区分生产环境和测试环境，并且请求不同的后端接口。以下是一种常见的配置管理方法：

1. 创建不同的环境配置文件：

   • 在你的Vue项目的根目录下，创建一个.env文件，用于存储全局环境变量。
   • 创建.env.production文件，用于存储生产环境的配置。
   • 创建.env.development文件，用于存储开发环境的配置。

2. 配置环境变量：

   • 在.env.production文件中，设置生产环境的配置，例如：

     VUE_APP_API_URL=生产环境的API地址

   • 在.env.development文件中，设置开发环境的配置，例如：

     VUE_APP_API_URL=开发环境的API地址

3. 使用环境变量：

   • 在Vue组件中，你可以通过process.env访问环境变量。例如，在发送请求的地方，你可以这样使用：

     import axios from 'axios';
     
     const apiUrl = process.env.VUE_APP_API_URL;
     
     // 使用apiUrl发送请求
     axios.get(apiUrl + '/data')
       .then(response => {
         // 处理响应
       })
       .catch(error => {
         // 处理错误
       });

4. 配置Webpack：

   • 在Vue CLI项目中，Webpack用于构建和打包你的代码。你可以在Webpack配置文件中根据环境变量来设置不同的配置。
   • 打开vue.config.js文件（如果不存在，则在项目根目录下创建它）。

   • 在configureWebpack选项中，根据process.env.NODE_ENV来区分生产环境和开发环境。例如：

     module.exports = {
       configureWebpack: {
         // 生产环境的配置
         production: {
           // ...
         },
         // 开发环境的配置
         development: {
           // ...
         }
       }
     };

这样，你就可以根据环境变量来统一配置和管理请求的后端接口。在生产环境中，Vue组件将使用生产环境的API地址发送请求，在开发环境中则使用开发环境的API地址。

---

Q：怎么设定当前用 .env.production文件还是使用 .env.development文件？

A：在Vue CLI中，默认的构建命令会根据不同的环境自动加载相应的.env文件。默认情况下，.env.production文件会在生产环境下加载，而.env.development文件会在开发环境下加载。

如果你使用npm run build命令构建项目，则会自动加载.env.production文件中的环境变量。

如果你使用npm run serve命令启动开发服务器，则会自动加载.env.development文件中的环境变量。

如果你希望手动指定使用特定的环境文件，可以使用--mode标志。例如：

# 使用生产环境配置构建
npm run build -- --mode production

# 使用开发环境配置启动开发服务器
npm run serve -- --mode development

在上述命令中，--之后的内容被视为参数传递给npm run命令。--mode指定了要使用的环境模式，这将决定加载哪个.env文件。

请注意，在Vue CLI项目中，还可以创建其他自定义的环境配置文件，如.env.staging（用于测试环境）或.env.local（用于本地开发），并使用相应的--mode标志来加载它们。

总结起来，Vue CLI会根据指定的环境模式自动加载相应的.env文件，但你也可以手动通过--mode标志来指定加载特定的环境文件。

---

Q：我可以修改 .env.production 的名字为 .env.prd 吗？

A：是的，你可以修改.env.production的文件名为.env.prd，只要你在相关的配置中相应地进行调整。

1. 将.env.production重命名为.env.prd。

2. 在package.json文件中，找到scripts字段下的build命令，并将--mode production改为--mode prd：

   "scripts": {
     "build": "vue-cli-service build --mode prd"
   }

3. 在Webpack配置文件（vue.config.js）中，根据process.env.NODE_ENV或process.env.VUE_APP_MODE（取决于你的配置）来加载对应的环境文件：

   module.exports = {
     configureWebpack: {
       // ...
     },
     chainWebpack: (config) => {
       config.plugin('define').tap((args) => {
         const mode = JSON.stringify(process.env.NODE_ENV || 'development');
         args[0]['process.env'].VUE_APP_MODE = mode;
         return args;
       });
     },
   };

   在上述代码中，process.env.VUE_APP_MODE会根据process.env.NODE_ENV的值来确定当前的模式。你可以根据需要自定义设置。

4. 在Vue组件中，你可以通过process.env.VUE_APP_MODE访问当前的环境模式。例如：

   const mode = process.env.VUE_APP_MODE;
   if (mode === 'prd') {
     // 使用 .env.prd 中的配置
   } else if (mode === 'development') {
     // 使用 .env.development 中的配置
   } else {
     // 其他模式的配置
   }

通过以上步骤，你就可以使用.env.prd作为生产环境的配置文件，并且可以通过--mode prd命令来加载该环境配置。确保在相关的配置文件和代码中使用相应的环境变量。