vue-cli3+下的多环境打包

记录下3.0下的多环境打包配置demo。

vue-cli2.0下的打包可以参考我的另一篇文章：vue-cli2.0下多环境打包

基于3.0的项目创建，可以参考我的另一篇文章：vue-cli3.0 +vant UI+移动端适配

直接开始吧：

如果帮助到了你，还请点个赞！！！！！

3.0的多环境配置会更加的简洁、高效

项目创建好后，我们进入package.json文件新增打包命令：

第一步

新增打包命令 使用 --mode 指定环境模式为 testMy

第二步

新增.env配置文件

.env.testMy配置：需要以VUE_APP_**开头

NODE_ENV='test'   //用于标记打包的环境  测试环境
VUE_APP_TITLE='testMy' 	//自定义打包环境的title，写不写都行
VUE_APP_BASEURL='http://testMy.com/testMy' //api接口地址

.env.配置：

NODE_ENV='production'   //用于标记打包的环境  生产环境
VUE_APP_TITLE='pro' 	//自定义打包环境的title，写不写都行
VUE_APP_BASEURL='http://pro.com/pro' //api接口地址

第三步

配置全局打包文件vue.config.js，没有就新建一个

module.exports = {
    publicPath:'./',
    outputDir: (process.env.NODE_ENV === "production")? 'dist' : 'testMy', // 不同的环境打不同包名
}

第四步

验证打包：

#	npm run testMy

ok，测试环境没问题，再来看下生产环境的包

生产环境的包也没问题了。

以上就是3.0版本的多环境打包配置了，
其他环境类似，不在赘述。

如果帮助到了你，还请点个赞！！！！！