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版本的多環境打包配置了，
其他環境類似，不在贅述。

如果幫助到了你，還請點個贊！！！！！