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_’开头,否则将出现无法读取的情况。