如何配置WSO2 Choreo为Vite+React应用提供config.js环境变量文件？

问题1：部署后config.js报Uncaught SyntaxError: Unexpected token '<' #

这个错误说明请求config.js时返回的是HTML内容（通常是index.html），而非预期的JS文件，核心原因是Choreo的路由重定向规则覆盖了静态资源请求。解决步骤：

• 确认Vite构建产物：本地执行npm run build后，检查dist目录下是否存在config.js（Vite默认会把public目录文件复制到dist根目录）。
• 配置Choreo静态资源规则：在Choreo部署设置中，确保静态资源根目录指向dist，同时设置排除规则，让/config.js这类静态文件请求直接返回对应资源，不触发SPA路由重定向。
• 调整引用路径：把index.html里的<script src="/config.js"></script>改为相对路径<script src="./config.js"></script>，避免环境根路径解析错误。

问题2：import.meta.env.VITE_LOCAL_API_URL返回undefined #

Vite的import.meta.env变量是构建时注入的，需确保Choreo环境变量能正确传递到构建流程：

• 确认变量前缀：你的变量名VITE_LOCAL_API_URL符合Vite要求（仅识别VITE_开头的变量），无需修改。
• 配置Choreo构建环境变量：在Choreo部署设置中，将VITE_LOCAL_API_URL添加到构建阶段环境变量，而非运行阶段。Vite会在构建时把这些变量替换到代码中，运行阶段无法动态注入。
• 验证构建日志：查看Choreo的构建日志，确认VITE_LOCAL_API_URL已被正确加载，本地可通过npm run build -- --mode production测试构建后的变量是否生效。

可选：运行时动态配置环境变量（无需重新构建） #

如果需要在运行时修改环境变量而不重新构建项目，可通过Choreo启动脚本动态生成config.js：

1. 在项目根目录添加启动脚本（如start.sh）：

   # 从Choreo运行时环境变量生成config.js
   echo "window.config = { apiUrl: '$API_URL' };" > dist/config.js
   # 启动静态服务（根据实际使用的服务调整，比如serve）
   npx serve dist -s
   

2. 在Choreo部署配置中，将启动命令改为bash start.sh，并配置API_URL为运行时环境变量。

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