React Web項目本地調試隨時切換服務器環境

使用方法

和後臺聯調，每次切換服務器都得重啓，所以將接口做成可以變化的。
根據mode的值選擇不同的環境：一般：prod | test | proxy | dev， 可以自己根據代碼裏面修改

例如： http://localhost:8082/?mode=dev#/

不過建議此操作只在本地運行的時候生效，在package.json 裏面還是寫固定的，不然部署出事就GG了。

package.json 部分代碼

"scripts": {
    "start": "set PORT=8082 && cross-env REACT_APP_SECRET_API=development react-app-rewired start",
    "build:test": "cross-env REACT_APP_SECRET_API=test react-app-rewired build",
    "build": "cross-env REACT_APP_SECRET_API=production react-app-rewired build",
  },

fly.io 主要代碼

import fly from 'flyio';
import { createHashHistory } from 'history';
import { message   } from 'antd';
import { getQueryUrlVariable } from '@/utils/business'
// 哈希模式的跳轉 forceRefresh 重新加載頁面 const history = createHashHistory({ forceRefresh: true });
const history = createHashHistory();
fly.config.timeout = 10000;
if (process.env.REACT_APP_SECRET_API === "production") {
    fly.config.baseURL = "https://xxxxxx";// 生產環境服務器
    fly.config.withCredentials  = false;
} else if (process.env.REACT_APP_SECRET_API === "test") {
    fly.config.baseURL = "http://xxxx";
    fly.config.withCredentials  = false;
} else {
    let mode = getQueryUrlVariable('mode')
    switch(mode){
        case 'dev' :
        case 'dev/' :
            fly.config.baseURL = "http://xxxxx"; break; // 本地調試服務器
        case 'prod' :
        case 'prod/' :
            fly.config.baseURL = "https://xxxxx"; break;// 生產環境服務器
        case 'proxy' :
        case 'proxy/' :
            fly.config.baseURL = "/api"; break;
            // fly.config.baseURL = "http://xxxx"; break;// 代理服務器
        default:
            fly.config.baseURL = "http://xxxx"; // 默認的服務器，一般對接測試
    } 
    fly.config.withCredentials  = false;
} 
//添加請求攔截器
fly.interceptors.request.use((request) => {
    //接口請求處理，根據自己項目來 
})
fly.interceptors.response.use(
    response => {
         // 正常處理，根據自己項目來
    },
    (err: any) => {
      	//接口錯誤處理，根據自己項目來
         
    }
);
export default fly;

工具函數

export function getQueryUrlVariable(variable: string)
{
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if(pair[0] === variable){return pair[1];}
  }
  return '';
}