React(CRA)中.env变量保留$符号及环境文件差异问题求助

一、保留$符号的正确写法 #

在Create React App的dotenv解析规则中，$是变量插值的特殊字符，直接写\$在.env文件中无法正确保留，可通过两种方式转义：

方法1：双反斜杠转义 #

REACT_APP_STATION_API=https://station.tw/api/Metro?&\\$format=JSON&\\$spatialFilter=nearby(StationPosition,{lat},{lon},{radius})

方法2：双$符号转义 #

REACT_APP_STATION_API=https://station.tw/api/Metro?&$$format=JSON&$$spatialFilter=nearby(StationPosition,{lat},{lon},{radius})

两种方式都能让解析后保留单个$符号，得到你预期的URL。

二、.env与.env.development的差异原因 #

Create React App在开发环境（执行npm start）下的环境文件加载逻辑：

1. 优先加载根目录通用配置.env
2. 再加载开发环境专属配置.env.development，后者同名变量会覆盖前者

你遇到的内容相同但表现不同的问题，核心是两者解析规则的细节差异：

• .env作为通用文件，对转义字符的处理更严格，单个\$会被当作无效转义，最终导致$被剥离
• .env.development是环境专属文件，解析时对转义的兼容性更好，单个\$就能正确保留$符号

额外注意：修改.env类文件后必须重启开发服务器，否则会使用旧的缓存变量值。

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