react 多环境运行打包配置

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文件，
再次运行，就可以根据打包命令运行不同的环境了；