构建 React App 后更改可从 env 文件访问的 Axios baseUrl

Question

目前我正在使用放置在带有变量的 react app 根文件夹中的 .env 文件

REACT_APP_BASE_URL = http://localhost:8081

我用户 axios 默认为 api 请求设置 base url

axios.defaults.baseUrl = process.env.REACT_APP_BASEURL

构建 React App .env 文件后不考虑，如果我更改了我的基本 URL，我如何在不重新构建整个 React 应用程序的情况下做到这一点。我想让基本 url 独立，所以我可以动态更改基本 url。什么是最好的解决方案？

Answer 1

因此，您需要清楚地了解 env 变量和构建过程会发生什么。

当您构建 create-react-app 应用程序时，构建它的过程使用 .env 文件来转换您的代码并将其打包。它的输出是静态的 HTML、js 和 CSS 文件。

这意味着当你提供你已经构建的应用程序时，应用程序代码已经在代码中包含 .env ，并且在将它们发送到浏览器时没有任何处理它，这就是为什么你每次想要重建它改变环境变量

如果您使用create-react-app 的 .env 文件结构，并使用 .env.development 文件进行开发，那么这应该不是问题，并且在开发中（当您运行 yarn start 时）和一个 .env.production 文件带有生产版本的基本 url。每次您想更改服务器上的值时，只需更新并重建即可。如果您不希望在 git 上对其进行版本控制，请改用 .env.production.local