技術標籤：reactwebpack前端reactjs

react +axios多環境執行打包配置

簡單易懂的react 多環境打包配置，直接上程式碼

首先需要先安裝一個外掛(npm/cnpm)

 cnpm i dotenv-cli -D

然後再專案的根節點建立幾個檔案

# .env.dev
	REACT_APP_BASE_URL=http://web.dev.xxxxx.com
	REACT_APP_ENV=dev
# .env.devtest
	REACT_APP_BASE_URL=http://web.test.xxxxx.com
	REACT_APP_ENV=dev
# .env.prddev
	REACT_APP_BASE_URL=http://web.dev.xxxxx.com
	REACT_APP_ENV=prd
	
這裡REACT_APP_ENV，我這邊定義了兩種，dev 和prd，用於區分本地執行還是打包上線；
 

我這邊的是這樣建立的，三個開發階段的執行環境，三個打包的執行環境，

然後在package.json裡邊直接配置執行命令就可以了

	"start:dev": "dotenv -e .env.dev react-app-rewired start",
    "start:test": "dotenv -e .env.devtest react-app-rewired start",
    "start:prd": "dotenv -e .env.devprd react-app-rewired start",
    "build:dev": "dotenv -e .env.prddev react-app-rewired build",
    "build:test": "dotenv -e .env.prdtest react-app-rewired build",
    "build:prd": "dotenv -e .env.prdprd react-app-rewired build",
 

這邊使用的是axios做介面請求，在src下建立一個介面的代理setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');
console.log(process.env.REACT_APP_BASE_URL,123)
module.exports = function(app) {
  app.use(
      createProxyMiddleware('/api', {
        target: process.env.REACT_APP_BASE_URL,
        // target: 'http://192.168.23.92:8881/',
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        },
      }))
};
 

處理封裝的axios的時候需要把介面給加上，我這邊建立的是requist.js

if(process.env.REACT_APP_ENV==="dev"){
  baseURL="/api"
}else {
  baseURL=process.env.REACT_APP_BASE_URL
}
// 建立axios例項
const service = axios.create({
  baseURL: baseURL, // api 的 base_url
  // baseURL: 'http://192.168.10.96:8080', // api 的 base_url
  // timeout: 5000 // 請求超時時間
})

這時候執行會報錯，需要在根目錄建立一個config-overrides.js檔案，
再次執行，就可以根據打包命令執行不同的環境了；