Vue 3项目中如何通过命令行参数覆盖.env文件中的环境变量？

当然可以实现！你之前尝试的命令无效，是因为npm run脚本的参数传递逻辑和Vue CLI读取环境变量的方式不匹配——Vue CLI是从当前进程的环境变量中读取VUE_APP_*前缀的变量，而你把变量写在npm run build后面，只会被当作命令参数传给vue-cli-service build，不会被识别为环境变量。

下面是两种可行的解决方案：

1. 直接在命令前注入环境变量（分操作系统） #

这种方式不需要额外安装依赖，但要注意不同系统的语法：

• Linux/macOS 或 Windows WSL：

  VUE_APP_BRAND=Brand2 npm run build
  

• Windows 命令提示符（CMD）：

  set VUE_APP_BRAND=Brand2 && npm run build
  

• Windows PowerShell：

  $env:VUE_APP_BRAND="Brand2"; npm run build
  

2. 使用cross-env实现跨平台兼容 #

如果需要在不同系统下用统一的命令，推荐安装cross-env来处理跨平台的环境变量设置：

1. 先安装依赖：

   npm install cross-env --save-dev
   

2. 修改package.json中的build脚本，用cross-env包裹原命令：

   "scripts": {
     "build": "cross-env vue-cli-service build"
   }
   

3. 之后就可以用统一的命令覆盖变量了：

   cross-env VUE_APP_BRAND=Brand2 npm run build
   

补充说明 #

• 如果需要同时覆盖多个环境变量，直接在命令前追加即可，比如：

  # Linux/macOS
  VUE_APP_BRAND=Brand2 VUE_APP_API_URL=https://api.example.com npm run build
  # 跨平台用cross-env
  cross-env VUE_APP_BRAND=Brand2 VUE_APP_API_URL=https://api.example.com npm run build
  

• 这种方式设置的环境变量优先级会高于.env文件中的值，完全符合你的需求。

内容的提问来源于stack exchange，提问作者mlst