react脚手架搭建的项目，在请求后端接口的时候，如何自动匹配生产环境和线上测试环境的后端接口host地址

Question

问题描述

react脚手架搭建的项目，
在请求后端接口的时候，url = host/接口名
每次在生产环境和线上测试环境切换的时候（需改代码在测试环境与线上正式环境版本升级），都需要手动去修改后端接口host的地址，
现在想让生产环境和线上测试环境来自动识别host的地址，要如何配置？
因为上线都是执行的npm run build这个命令。

Answer 1

写个runtime吧

Answer 2

根据不同的环境在 html 中注入配置信息

window.__config = {
    host: ''
};


const host = window.__config.host;
request(`${host}/api`);

Answer 3

在webpack中通过DefinePlugin定义一个常量。
然后通过process.env.NODE_ENV来给这个常量赋值.
webpack.config.js

const requestHost= process.env.NODE_ENV === 'development' ? '生产ip' : '开发ip';

new webpack.DefinePlugin({
    requestHost
});

然后你在组件中直接获取这个requestHost就可以了。

const url = `${requestHost}/api`;
fetch(url);