首先需要安装cross-env解决环境变量问题

npm install --save cross-env
配置本地环境

修改webpack.dev.conf.js文件
在这里插入图片描述
然后修改config目录下index.js文件
在这里插入图片描述
最后修改config目录下的dev.env.js文件
在这里插入图片描述
这样使用axios封装公用请求方法时候就能拿到全局process.env中配置的BASE_API

线上打包配置

注:这里我分成测试环境预生产环境生产环境来分开配置

首先需要在package.json文件中配置环境变量以及打包命令
在这里插入图片描述
然后需要在config目录下生成test.env.jsrc.env.jsprod.env.js文件
在这里插入图片描述
注:NODE_ENV为环境变量标识,不能重复

然后在webpack.prod.conf.js文件中增加环境判断
在这里插入图片描述
最后在build.js文件中注释掉如下代码
在这里插入图片描述
接下来你就能根据不同的打包命令来分环境打包了

npm run build:test // 测试环境
npm run build:rc // 预生产环境
npm run build:prod // 生产环境
Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐