vue cli3.0根据不同的环境打不同的包

参考博客:
(1) https://www.jianshu.com/p/adc33ac846f9
(2)https://www.cnblogs.com/heroljy/p/9305263.html

方案一:

第一步: 在package.json中新建三个文档: (1).env.test(开发环境);(2).env.development(测试环境);(3).env.production(正式环境)

vue cli3.0根据不同的环境打不同的包_第1张图片

第二步: 在这三个文档中分别配置两个参数: (1)VUE_APP_URL(API接口地址) (2) outPutDir(输出包的名字)

举个测试环境的.env.development的例子:
vue cli3.0根据不同的环境打不同的包_第2张图片

第三步: 在package.json和这三个文档的同一级新建一个vue.config.js文档,在module.export中配置outPutDir

vue cli3.0根据不同的环境打不同的包_第3张图片
vue cli3.0根据不同的环境打不同的包_第4张图片

第四步: 在package.json中的"script"配置参数

vue cli3.0根据不同的环境打不同的包_第5张图片

第五步: 测试:npm run build打一个测试环境包,会产生一个dev 包

vue cli3.0根据不同的环境打不同的包_第6张图片
vue cli3.0根据不同的环境打不同的包_第7张图片

第六步: 检验测试结果:console.log(process.env.VUE_APP_URL)

vue cli3.0根据不同的环境打不同的包_第8张图片
vue cli3.0根据不同的环境打不同的包_第9张图片

你可能感兴趣的:(vue基础)