vue配置多个环境，根据执行命令判断环境在 Vue 中，你可以通过配置多个环境变量来实现根据执行命令来判断环境，通过指令

1.在项目根目录下创建多个环境变量文件，例如：.env.development、.env.uat、.env.pro，分别对应开发环境、测试环境和生产环境等。

如.env.uat

NODE_ENV=uat
VUE_APP_PREVIEW=false
VUE_APP_API=https://xxxx.com
VUE_APP_API_BASE_URL=/api
VUE_APP_TEST=true

2.在 Vue 项目中，可以通过 process.env 来访问环境变量,例如根据我们在第一步配置的.env文件，process.env.VUE_APP_API 可以获取 API 地址。

在vue.config.js中配置代理

const { VUE_APP_API } = process.env
devServer: {
    proxy: {
      '/api': {
        target: `${VUE_APP_API}/api`,
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    port: 8001
  }

3.在 package.json 文件中的 scripts 字段下添加多个脚本命令，如下所示

"scripts": { 
    "serve:dev": "vue-cli-service serve --mode development",  
    "serve:uat": "vue-cli-service serve --mode uat"
    "serve:prod": "vue-cli-service serve --mode production", 
}

4.当执行对应的脚本命令时，Vue 会根据命令中的 --mode 参数读取对应的环境变量文件，并将其注入项目中。例如

# 启动开发环境 
npm run serve:dev 
 
# 启动测试环境 
npm run serve:uat

# 启动生产环境 
npm run serve:prod

不太熟悉环境变量的童鞋们，可参考模式和环境变量 | Vue CLI (vuejs.org)