vue多环境配置-简易版

下面是一套更简单、通用且实用的流程，只需几步即可完成多环境配置：

1. 建立环境变量文件
   在项目根目录下新建：

   .env.dev     # VUE_APP_ENV=dev
   .env.lan     # VUE_APP_ENV=lan
   .env.prod    # VUE_APP_ENV=prod
   

   文件中只需要写一行：

   VUE_APP_ENV=dev   # 或 lan、prod
   

2. 在 package.json 定义 Script
   借助 Vue CLI 的 --mode，快速切换环境：

   {
     "scripts": {
       "serve:dev": "vue-cli-service serve --mode dev",
       "serve:lan": "vue-cli-service serve --mode lan",
       "serve:prod": "vue-cli-service serve --mode prod",
       "build:dev": "vue-cli-service build --mode dev",
       "build:lan": "vue-cli-service build --mode lan",
       "build:prod": "vue-cli-service build --mode prod"
     }
   }
   

3. 单文件简单配置映射
   不用搞一大堆 config 文件，直接在 src/config.js：

   const map = {
     dev:  { apiBase: 'https://api.test.com' },
     lan:  { apiBase: 'http://intranet.api.com' },
     prod: { apiBase: 'https://api.com' }
   };
   export default map[process.env.VUE_APP_ENV || 'dev'];
   

4. 代码中引用

   import config from '@/config';
   // …
   axios.get(`${config.apiBase}/users`);
   

5. （可选）构建时优化
   若需简单地去掉 prod 下的调试信息，在 vue.config.js：

   module.exports = {
     chainWebpack: config => {
       if (process.env.VUE_APP_ENV === 'prod') {
         config.optimization.minimizer('terser').tap(([opts]) => {
           opts.terserOptions.compress.drop_console = true;
           return [opts];
         });
       }
     }
   };
   

这样，你就用最少的文件和代码，完成了：

• 环境切换（脚本一行）
• 变量加载（.env.* 自动注入）
• 配置管理（单表映射）
• 运行时使用（import config 即可）

通用于 Vue、React、Node.js 等任何支持 dotenv 或 --mode 的项目。