唯品秀前端博客
当前位置: 前端开发 > Vue.js专区 > vue2+webpack区分环境打包

vue2+webpack区分环境打包

2018-12-12 分类:Vue.js专区 作者:管理员 阅读(2396)

在开发脚手架项目中,我们经常需要去根据环境打包代码,主要是改变对应的接口,上测试要打包对应的测试接口地址,上正式应该打包时候用正式,这需要我们就有打包区分环境的需求,下面用最直白的话来讲下如何去做

首先众所周知,打包代码我们需要跑npm run xxx命令,那么这个命令在项目中从哪儿来的?就是package.json文件中scripts选项中

如上图,我在当中新增了一个pre命令,当然这个名字是你自定义,跑的脚本代码和下面build是一样的,同样是去执行build文件中的build.js,那么我们继续深入找到这个js,如下图:

注意,在当前文件里我打印了这个process.env.npm_lifecycle_event,npm_lifecycle_event是node环境里npm提供的一个东西,它主要就是可以拿到你在之前package.json文件中scripts对象里设置的key,比如当你运行npm run pre时候,你会发现process.env.npm_lifecycle_event打印出了pre,于是有了这个,我们就可以开始进行区分了

1
process.env.NODE_ENV = process.env.npm_lifecycle_event === 'pre' ? 'pre' : 'production';

process.env是个全局方法,我们通过拿到的运行命令的key进行对他赋值,注意在build.js下面我们引用了一个config.js

进入这个文件中,会看到我们熟悉的几个命令,比如build,dev

如上图所示,我们看到在build对象中有个env,通过上个文件我们给process.env.NODE_ENV赋值不同而去引用对应的不同文件,如下:

1
env: process.env.NODE_ENV === 'pre' ? require('./test.env') : require('./prod.env'),

默认你应该在config文件夹中有一个prod.env.js,这个文件导出的是NODE_ENV:production,如下图:

将这个文同目录下复制一份改个名字,如我改成test.env.js,导出值也改个名字,当然,名字也是自定义,如下图:

然后在你的api请求文件中就可以去判断,当前是否是正式环境打包请求,如下图:

上面就是只要不是通过npm run build的命令,统统都是默认测试接口,因为我们上述已经说了,在npm run build下我们prod.env.js导出的就是production,而这个production又是通过process.env.NODE_ENV === 'pre'去判断加载进来的,到这里你或许已经清楚,prod.env.js和test.env.js的两个导出就是映射到我们之前设置的打包命令,至此教程结束,赶紧npm run build及npm run pre试试?

现在你已经可以区分环境进行打包了,但事实上并没有完,因为在webpack打包规则中还有几个地方区分环境变量,如果不修改,那么你打包的代码npm run pre出来的和最终npm run build出来的不会一致,比如路径?还有代码不会压缩等等,因为这时候npm run pre走的还是dev开发模式的打包,很显然这有违背我们的意愿,我们是想测试环境代码和最终上线代码除了接口使用不同,其他应该是完全一致的,那么需要再次修改点小东西。

如上图我已经改过来了,原本process.env.NODE_ENV == 'development'的三个配置文件改为process.env.NODE_ENV !== 'development',这样就能保证build和pre打包出来的完全一致了。

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(8) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
8

谢谢你请我吃鸡腿*^_^*

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 6 条评论 - vue2+webpack区分环境打包

  1. 不吃鱼的猫 iPhone Safari 604.1

    好文章,写的不错,比较清晰

    1. 唯品秀前端技术博客 Windows NT Chrome 57.0.2987.98

      @不吃鱼的猫有空多来逛逛

  2. 码云笔记 Windows 7 Chrome 63.0.3239.132

    你好,朋友,交换友链吗?

    1. 唯品秀前端技术博客 Mac OS X Chrome 70.0.3538.110

      @码云笔记可以啊

  3. vultr vps Windows NT Chrome 63.0.3239.132

    朋友 交换链接吗

    1. 唯品秀前端技术博客 Windows NT Chrome 57.0.2987.98

      @vultr vps可以啊,你网站叫啥,域名地址多少?

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,主题源码 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 238 篇
  • 草稿数目: 0 篇
  • 分类数目: 15 个
  • 独立页面: 6 个
  • 评论总数: 863 条
  • 链接总数: 14 个
  • 标签总数: 429 个
  • 建站时间: 1041 天
  • 注册用户: 2886 人
  • 访问总量: 8668689 次
  • 最近更新: 2019年10月21日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线