我正在开发一个小项目，包括具有两种环境的 React 前端和 Java 后端。
我在如何处理多个环境的想法上挣扎，我使用 axios 声明 API url：
export default axios.create({
baseURL: `http://api.dev.project.local/api/v1`,
});
但这仅适用于一种环境，构建包后如何更改API url？我认为创建两个构建（一个用于开发，一个用于生产）不是一个好习惯，因为它可能会在工件管理器中造成混乱（我们使用 Azure Artifacs Feed）。
你怎么解决这个问题？
如果您使用的是create-react-app，并且只需要本地和生产环境，请使用添加自定义环境变量内置功能。否则，一个有用的替代方法是env-cmd。
安装 env-cmd，作为开发依赖：
npm i -D env-cmd
添加.env文件（在项目根目录下，所有环境都相同）：
REACT_APP_API_ENDPOINT = https://default.example.com
添加.env.qa文件：
REACT_APP_API_ENDPOINT = https://qa.example.com
添加.env.staging文件：
REACT_APP_API_ENDPOINT = https://stage.example.com
添加.env.production文件：
REACT_APP_API_ENDPOINT = https://production.example.com
更新 package.json
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build:qa": "env-cmd -f .env.qa npm run-script build",
"build:staging": "env-cmd -f .env.staging npm run-script build",
}
}
请注意，默认的start和build create-react-app 命令分别使用.env和.env.production，不需要env-cmd。
准备在我们的代码中使用
const baseUrl = process.env.REACT_APP_API_BASE_URL;
而且，我们也可以在开发环境中使用 env-cmd 作为启动命令。