reactwebpack

webpack针对不同环境使用不用接口地址的适配问题

2019-12-04  本文已影响0人  说好的幸福2020

项目中使用了create-react-app搭建的项目,package.json中用的react-app-rewired方式,由于webpack没有被释放,不能在webpack的配置文件直接配置适配,所以针对build 的dev,test, production环境取不同的接口地址,就不是很方便。(create-react-app默认情况下,webpack的配置是对dev ,production环境,并没有test。)

请求接口用的是axios,针对不同的环境设置不用baseurl即可, baseurl.js如下:

let BASE_URL = '';
if(process.env.REACT_APP_ENV === 'development') {
    BASE_URL = 'http://开发环境/' 
}
else if(process.env.REACT_APP_ENV === 'test'){
    BASE_URL = 'http://测试环境/' 
}
else if(process.env.REACT_APP_ENV === 'production'){
    BASE_URL = 'http://生产环境/' 
}

export default BASE_URL

剩余的问题就是如何得到process.env.REACT_APP_ENV 的值。方法是,不同的环境使用不同的build方式》

dev 环境build 的话用npm run build:dev
prodution 环境build 的话 用npm run build:prodution
test  环境build 的话 用npm run build:test

package.json文件简略如下:

"start": "dotenv -e .env.development react-app-rewired start ",
 "test": "react-app-rewired test",
"eject": "react-scripts eject",
"build:dev": "dotenv -e .env.dev react-app-rewired build",
"build:production": "dotenv -e .env.production react-app-rewired build",
"build:test": "dotenv -e .env.test react-app-rewired build"

使用了dotenv-cli 与  env文件
dotenv-cli包的作用是可以使用.env文件指定的变量,然后process.env对象就有该变量的值了。
(dotenv使用方式http://npm.taobao.org/package/dotenv-cli
env文件可以按照如下方式:
例如在.env.development文件中:
                REACT_APP_ENV=development

网上的有用资料1  https://blog.csdn.net/songshu92/article/details/99567343#%E5%A4%9A%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE
2 webpack vue-cli2 区分测试环境和线上环境 https://www.jianshu.com/p/30d30d2835b2

上一篇下一篇

猜你喜欢

热点阅读