您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

vue-cli3配置多环境打包踩坑记

创建项目的流程什么的就不说细说了,直接执行create命令即可;在项目创建完成之后,默认只提供了一种打包环境,执行npm run build就可以实现.但是实际项目中这并不能满足我们的需求,我们要的是都环境打包.比如开发环境、测试环境以及生产环境。

要达到这样的目的,需要在项目根目录下新建下图中红线部分的三个文件:

其中三个文件内的配置都大同小异,如下:

production

NODE_ENV = 'production'    
VUE_APP_TITLE = 'production'
# base api
VUE_APP_BASE = 'pro'
outputDir = dist_pro
VUE_APP_API_BASE_URL = 服务地址
VUE_APP_TERMINAL = win
test 

NODE_ENV = 'production'
VUE_APP_TITLE = 'test'
# base api
VUE_APP_BASE = 'test'
outputDir = dist_test
VUE_APP_API_BASE_URL = 服务地址
VUE_APP_TERMINAL = win
devlopment

NODE_ENV = 'production'
VUE_APP_TITLE = 'development'
# base api
VUE_APP_BASE = 'dev'
outputDir = dist_dev
VUE_APP_API_BASE_URL = /api
VUE_APP_TERMINAL = win

 上面是最终配置,但是中间有有过另外一个版本,但很遗憾的是,上一版本在某些情况下无法打包,具体配置如下:

production

NODE_ENV = 'production'    
# base api
VUE_APP_BASE = 'pro'
outputDir = dist_pro
VUE_APP_API_BASE_URL = 服务地址
VUE_APP_TERMINAL = win
test 

NODE_ENV = 'test'
# base api
VUE_APP_BASE = 'test'
outputDir = dist_test
VUE_APP_API_BASE_URL = 服务地址
VUE_APP_TERMINAL = win
devlopment

NODE_ENV = 'development'
# base api
VUE_APP_BASE = 'dev'
outputDir = dist_dev
VUE_APP_API_BASE_URL = /api
VUE_APP_TERMINAL = win

是的,这样的配置是有问题的,相信已经看出前后两种配置之间的差别了;怎么说呢,node的process.env对象是允许我们自定义字段的,但是webpack打包时针对process.env.NODE_ENV===‘production’和其他情况打出来的包结构和大小都不一样;那么打包就会存在差异,也就导致了某些偶现问题;所以可以另外在定义一个变量来判断环境,比如上面的VUE_APP_TITLE等。

注:自定义命名时,除NODE-ENV之外,其余的命名必须以‘VUE_APP_’开头,否则将出现无法读取的情况。


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进