Win10下React项目用dotenv时如何配置package.json的npm start脚本？

一、Win10环境下的正确脚本写法 #

方案1：适配Windows CMD的原生写法 #

将scripts修改为：

"scripts": {
  "start": "set PORT=XXXX && dotenv -e .env.local && react-app-rewired start"
}

关键修正：在set PORT=XXXX后添加&&，与后续的dotenv命令分隔。Windows CMD中，set命令设置环境变量后必须明确用&&开启下一个命令，否则会把后续命令当作set的参数处理，导致dotenv无法正确加载.env.local，进而引发路径未定义的错误。

方案2：跨平台兼容写法（同时支持Mac/Win） #

如果需要一套脚本兼容两个系统，先安装跨环境依赖：

npm install cross-env cross-env-shell --save-dev

然后修改scripts：

"scripts": {
  "start": "cross-env-shell PORT=XXXX dotenv -e .env.local react-app-rewired start"
}

cross-env-shell会自动适配不同系统的环境变量设置语法，无需区分Win和Mac的命令差异。

二、Win与Mac脚本的核心差异 #

• 环境变量设置语法：Windows CMD用set VAR=值，Mac/Linux的Shell用VAR=值；且Mac中VAR=值 command是将变量仅作用于后续单个命令，而Windows中set设置的变量会作用于整个会话，必须用&&分隔命令。
• 命令分隔逻辑：Windows CMD中，set命令后直接跟其他命令会被识别为变量值的一部分，必须用&&明确分隔；Mac Shell则允许VAR=值 command的连续写法，无需额外分隔符。
• 执行环境差异：Mac默认用Bash/Zsh，Windows默认用CMD/PowerShell，不同Shell的语法规则不同（比如PowerShell设置环境变量是$env:VAR=值，和CMD又有区别）。

为什么移除&&后能执行但网站无法显示？ #

移除&&后，命令变为set PORT=XXXX dotenv -e .env.local react-app-rewired start，Windows CMD会将XXXX dotenv -e .env.local react-app-rewired start全部当作PORT变量的值，导致dotenv和react-app-rewired根本没有被执行，自然无法启动React项目，网站也就无法显示。

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