如何通过npm脚本永久替换React项目.env文件中的环境变量值？

当然可以实现永久替换，临时设置变量的方式只在当前会话生效，要让修改永久生效，核心是直接修改.env文件本身，下面是几种可行方案：

1. 手动编辑.env文件（最直接） #

找到项目根目录下的.env文件，定位到REACT_APP_VARIABLE_NAME这一行，直接把默认值改成你需要的永久值，比如：

# 原来的默认值
REACT_APP_VARIABLE_NAME=default-value

# 修改后的永久值
REACT_APP_VARIABLE_NAME=your-permanent-value

之后所有的npm run build或者npm start都会自动读取这个新值，无需每次手动传参。

2. 用npm脚本自动修改.env文件（适合自动化场景） #

如果需要通过命令行快速切换环境变量值，可以在package.json的scripts里添加自定义脚本，自动修改.env文件内容：

方案A：Linux/macOS 原生命令实现 #

使用sed命令替换指定行：

{
  "scripts": {
    "set-env:prod": "sed -i '' 's/REACT_APP_VARIABLE_NAME=.*/REACT_APP_VARIABLE_NAME=production-value/' .env",
    "set-env:dev": "sed -i '' 's/REACT_APP_VARIABLE_NAME=.*/REACT_APP_VARIABLE_NAME=development-value/' .env"
  }
}

执行npm run set-env:prod后，.env里的目标变量就会被永久替换为生产环境的值。

方案B：Windows 原生命令实现 #

使用PowerShell命令实现替换：

{
  "scripts": {
    "set-env:prod": "powershell -Command \"(Get-Content .env) -replace '^REACT_APP_VARIABLE_NAME=.*', 'REACT_APP_VARIABLE_NAME=production-value' | Set-Content .env\"",
    "set-env:dev": "powershell -Command \"(Get-Content .env) -replace '^REACT_APP_VARIABLE_NAME=.*', 'REACT_APP_VARIABLE_NAME=development-value' | Set-Content .env\""
  }
}

方案C：跨平台npm包实现 #

如果需要同时支持Windows/Linux/macOS，可以使用replace-in-file包：

1. 先安装依赖：

npm install replace-in-file --save-dev

2. 在package.json中添加脚本：

{
  "scripts": {
    "set-env:prod": "node -e \"const replace = require('replace-in-file'); try { const results = replace({ files: '.env', from: /REACT_APP_VARIABLE_NAME=.*/g, to: 'REACT_APP_VARIABLE_NAME=production-value' }); console.log('修改成功:', results); } catch (err) { console.error('修改失败:', err); }\""
  }
}

执行npm run set-env:prod即可完成永久替换。

注意事项 #

• 如果项目中存在.env.local、.env.development、.env.production等环境特定配置文件，要根据需求修改对应的文件，因为React会优先加载当前环境对应的配置文件。
• 修改.env文件后，需要重启本地开发服务器（如果正在运行npm start），新值才会生效；构建时则会自动读取最新值。

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