VUE给不同环境配置不同的打包命令

原创 Sakura 教程 Vue 65阅读 16 天前 举报

第一步:安装cross-env

第二步:修改各环境的参数
在config/目录下,添加test.env.js 、pre.env.js两个文件
修改prod.env.js里的内容,修改后的内容如下:

分别对test.env.js和pre.env.js文件内容进修修改,修改后的内容如下:

对dev.env.js文件内容进行修改,修改后的内容如下。dev环境配制了服务代理,API_ROOT前的api是配制的代理地址。

第三步:修改项目package.json文件
对package.json文件中的scripts内容进行个性,添加上新定义的几种环境的打包过程,里面的参数与前面配置协调保持一致。特别注意是 env_config与上面写的配置保持一致。

在这里,NODE_ENV最好都设成production,因为在utils.js只做了production一种判定,亲测不会影响各环境API参数。
第四步:修改config/index.js
修改config/index.js文件中build参数,这里的参数会在build/webpackage.prod.conf.js中使用到

第五步:在webpackage.prod.conf.js中使用构建环境参数
对build/webpackage.prod.conf.js文件进行修改,调整env常量的生成方式。

第六步:调整build/build.js 
删除process.env.NODE_ENV的赋值,修改spinner的定义,调整后的内容如下:

最后执行:
npm run build:test
npm run build:prod
npm run build:pre
可以针对不同的接口地址,打包不同接口地址的代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复