CRA项目配置动态环境变量后出现Uncaught SyntaxError报错求助

你遇到的Uncaught SyntaxError: Unexpected token '<'错误，本质是请求/env.js时服务器找不到这个文件，返回了SPA的入口index.html，浏览器把HTML当成JS解析才报的错。结合CRA的特性，给你一套可行的方案：

正确操作步骤 #

1. 拆分环境变量逻辑

   • 在src目录下新建env.js，导出需要的静态环境变量（CRA只会把REACT_APP_前缀的变量注入浏览器环境）：

     export const staticEnv = {
       REACT_APP_API_URL: process.env.REACT_APP_API_URL,
       // 按需添加其他你需要的REACT_APP_前缀变量
     };
     

   • 在public目录下新建env.js（这个文件会被直接复制到build根目录），存放动态可修改的变量：

     // 构建后直接编辑这个文件就能修改变量
     globalThis.env = {
       REACT_APP_API_URL: "https://your-dynamic-api.com"
     };
     

2. 在index.html中引入public下的env.js
   在public/index.html的<head>标签内添加：

   <script src="/env.js"></script>
   

3. 在业务代码中合并变量
   在需要使用环境变量的地方，导入静态变量并和全局动态变量合并：

   import { staticEnv } from './env';
   
   // 动态变量会覆盖同名的静态变量
   const env = { ...staticEnv, ...globalThis.env };
   
   // 示例：使用合并后的变量
   console.log(env.REACT_APP_API_URL);
   

为什么之前的方法无效？ #

• 把env.js放在src里：CRA不会将src目录下的单独JS文件打包到build根目录，请求/env.js会返回404，服务器 fallback 到index.html，导致浏览器把HTML当成JS解析报错。
• 直接在public的env.js里用process.env：process是Node.js环境的专属对象，浏览器端不存在，所以会报undefined。

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