React 16.9项目无法获取.env文件URL变量求助

我来帮你排查这个环境变量读取失败的问题，这是React项目里非常常见的配置坑，咱们一步步拆解原因和解决方案：

1. 核心问题：环境变量命名不符合React要求 #

react-scripts（Create React App默认的脚本工具）有个硬性规则：所有自定义环境变量必须以REACT_APP_作为前缀，否则会被自动忽略——这是为了避免和系统环境变量冲突。你现在用的loginUrl没有加这个前缀，所以process.env里根本不会有这个变量。

2. 次要问题：.env文件的格式错误 #

你的配置写的是：

loginUrl = "http://localhost:8080/api/2.0/admin/auth/login"

这里有两个格式问题：

• 等号两边不能有空格，正确格式是KEY=VALUE
• 不需要给值加引号，react-scripts会自动处理字符串，加引号的话最终读取的值会包含引号本身

修正后的配置示例 #

把你的.env/.env.dev文件改成：

REACT_APP_LOGIN_URL=http://localhost:8080/api/2.0/admin/auth/login

3. 必须重启开发服务 #

修改.env文件或者切换环境脚本后，一定要重启react-scripts的服务，因为它只会在启动时加载一次环境变量，热更新不会重新读取这些文件。比如你执行npm start后改了配置，得先按Ctrl+C停止服务，再重新运行npm start。

4. 验证变量是否生效 #

在组件里可以先打印整个process.env来确认变量是否存在：

console.log(process.env);

如果能看到REACT_APP_LOGIN_URL，再单独打印它：

console.log(process.env.REACT_APP_LOGIN_URL);

额外提示（针对跨平台） #

如果你是Windows系统，package.json里的cp命令会失效，因为Windows用的是copy。如果需要跨平台兼容，可以安装cross-env或者copyfiles工具，但这不是当前问题的核心，先解决前面的命名和格式问题即可。

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