鍍金池/ 問答/HTML/ react腳手架搭建的項(xiàng)目，在請求后端接口的時候，如何自動匹配生產(chǎn)環(huán)境和線上測試

react腳手架搭建的項(xiàng)目，在請求后端接口的時候，如何自動匹配生產(chǎn)環(huán)境和線上測試環(huán)境的后端接口host地址

問題描述

react腳手架搭建的項(xiàng)目，
在請求后端接口的時候，url = host/接口名
每次在生產(chǎn)環(huán)境和線上測試環(huán)境切換的時候（需改代碼在測試環(huán)境與線上正式環(huán)境版本升級），都需要手動去修改后端接口host的地址，
現(xiàn)在想讓生產(chǎn)環(huán)境和線上測試環(huán)境來自動識別host的地址，要如何配置？
因?yàn)樯暇€都是執(zhí)行的npm run build這個命令。

回答
編輯回答
離夢

寫個runtime吧

2018年2月24日 18:56
編輯回答
夏木

在webpack中通過DefinePlugin定義一個常量。
然后通過process.env.NODE_ENV來給這個常量賦值.
webpack.config.js

const requestHost= process.env.NODE_ENV === 'development' ? '生產(chǎn)ip' : '開發(fā)ip';

new webpack.DefinePlugin({
    requestHost
});

然后你在組件中直接獲取這個requestHost就可以了。

const url = `${requestHost}/api`;
fetch(url);
2017年1月5日 01:47
編輯回答
薄荷綠

根據(jù)不同的環(huán)境在 html 中注入配置信息

window.__config = {
    host: ''
};


const host = window.__config.host;
request(`${host}/api`);
2018年5月24日 13:21