webpack 多环境打包

原创 booogle 随笔 待整理 103阅读 2018-12-10 13:11:20 举报

在使用vue+webpack的时候,很多时候需要根据不同的命令打包不同的环境。并且需要连接到不同的服务。下面根据自身需要,可进行如下修改。
在config/index.js中,修改:

同理,如果有test环境,可修改:

2.在static目录下js目录下创建 一个config.js文件
static/js/config.js 默认设置未dev环境下的服务地址。

3.在build/build.js中修改:
在变量定义后面增加下面几行

因为这样修改文件的操作是在打包前修改的原项目中的static/js/config里面的文件,再因为npm run dev 的时候,运行的脚本是直接运行的build/webpack.dev.conf.js文件,并没有执行build/build.js,所以我们需要在build/webpack.dev.conf.js这个文件中将dev的环境的服务地址更改回来。即在build/webpack.dev.conf.js这个文件下添加:

这样,在index.html中就引用static/js/config.js文件,因为在打包的时候,会根据环境动态改变了文件的内容,打包完成后,config.js文件里面的serviceApi这个变量就是当前环境里面服务的地址。

最后的最后,需要在package.json中配置打包命令:

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

赶紧努力消灭 0 回复