webpack分环境打包-vue爬坑

概要说明:

vue在脚手架情况下,新建的项目,默认再带webpack打包。

在项目开发中,用户本地测试以及线上测试环境,以及线上生成环境,所需要得api是不一样。

当然,可以每次npm run build 的时候,去更改需要的api路径。

但是,每次更改,总是会担心是否会漏,并且开发环境下,又要切换来切换去。

基于webpack强大的打包功能。可以尝试如下分环境打包。

步骤说明:

第一步,配置vue的package.json命令,(新增一条打包命令,用于线上测试生产):

第二步:复制build文件夹下的build.js,并命名为test.js,这个名字与第一步中,快捷命令里面的对应的文件名要一致。

注意:要设置它的 process.env.NODE_ENV = 'testing';

 第三步:

第四步:更改config里面的环境配置。

根据需要,将此三个文件的api_root,设置为需要的域名。

第四步,在webpack.prod.conf.js中,检查下环境的配置判断是否正确:

第五步,这些配置设置好之后,在src中新建一个js文件,用于全局引用环境配置的api_root.

 然后再,在main.js中挂在vue的原型上,全局引用。

最后,在组件中,这样使用:

结束语句:

在最后,执行命令,

npm run build ,则打包的是prod.env.js对应的api域名的,(线上正式生产环境);

npm run build:test,则打包的是test.env.js对应的测试api域名,(线上测试生产环境);

npm run dev,则是运行dev.env.js本地开发环境对应的poxy代理得到的api环境。

原文地址:https://www.cnblogs.com/liuguoying/p/13293533.html