使用yarn+env-cmd时，如何在create-react-app的public目录JS文件注入环境变量？
2026-5-29
在React应用的public/*.js文件中注入环境变量的解决方案
你遇到的问题其实是Create React App（CRA）对环境变量处理的规则导致的——CRA只会自动在src目录下的文件和public/index.html中注入环境变量，而public目录下的其他.js文件不会被webpack的变量替换流程处理，所以直接用process.env.REACT_APP_URL或者%REACT_APP_URL%都不会生效。
下面给你两个可行的解决方案，根据你的需求选择：
方案1：将public下的JS文件迁移到src目录
这是最符合CRA设计规范的做法：
- 把你需要使用环境变量的
public/*.js文件移动到src目录下（比如src/utils/或者其他合适的位置） - 在文件中直接使用
process.env.REACT_APP_URL，CRA的webpack会在构建时自动把这个变量替换为对应环境的实际值 - 如果你需要在页面中引入这个JS，现在可以通过React组件的
useEffect或者直接在组件中导入并调用，而不是在index.html里通过<script>标签引入静态文件
方案2：通过public/index.html将变量挂载到window对象
如果因为某些原因不能移动文件，可以先在index.html中把环境变量暴露到全局window对象，再在public的JS文件中访问：
- 在
public/index.html的<head>标签中添加一段脚本，把环境变量挂载到window：
<script> // 这里的%REACT_APP_URL%会在构建时被CRA替换为实际的环境变量值 window.REACT_APP_URL = '%REACT_APP_URL%'; </script>
- 在你的
public/*.js文件中，直接访问全局变量：
// 比如在public/custom.js中 console.log(window.REACT_APP_URL); // 就能拿到对应的环境变量值了
注意事项
- 确保你的环境变量都是以
REACT_APP_开头的，这是CRA识别环境变量的强制规则，你的配置已经符合要求 - 构建时要使用对应的命令（比如
yarn build:local或yarn build:uat），确保env-cmd加载了正确的.env文件
内容的提问来源于stack exchange，提问作者Toine Seiter
