Vue项目yarn build时NODE_ENV被覆盖，如何切换开发/生产模式？

我完全懂你的困扰——Vue CLI确实会根据执行的命令（比如build）自动强制设置NODE_ENV的默认值，这直接覆盖了你在.env文件里的配置。不过有几个直接可行的办法能解决这个问题，不用依赖自定义变量：

方法1：命令行直接指定NODE_ENV（适用于Mac/Linux） #

直接修改package.json里的scripts字段，给构建命令添加环境变量前缀：

{
  "scripts": {
    "build": "vue-cli-service build",
    "build:dev": "NODE_ENV=development vue-cli-service build"
  }
}

之后执行yarn build:dev，就能强制让构建过程使用development环境，Vue CLI的默认值会被命令行传入的变量覆盖。

方法2：使用cross-env实现跨平台兼容 #

如果你的项目需要在Windows系统运行，上面的环境变量语法不生效，推荐用cross-env包统一跨平台的环境变量设置：

1. 先安装依赖：

yarn add cross-env --dev

2. 修改package.json的scripts：

{
  "scripts": {
    "build": "vue-cli-service build",
    "build:dev": "cross-env NODE_ENV=development vue-cli-service build"
  }
}

现在不管是Windows还是Mac/Linux，执行yarn build:dev都能正确把NODE_ENV设为development。

为什么.env里的配置会被覆盖？ #

这里得说下Vue CLI的优先级规则：命令行传入的环境变量优先级最高，其次是专门的环境配置文件（比如.env.production），最后才是通用的.env文件。而vue-cli-service build命令会默认把NODE_ENV设为production，这个值属于命令行级别的传入，所以会直接覆盖你在.env里的设置。

如果你不想新增脚本命令，也可以每次执行构建时手动传入变量：

# Mac/Linux
NODE_ENV=development yarn build

# Windows（PowerShell）
$env:NODE_ENV="development"; yarn build

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