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