项目开发时,基本需要打多种环境的包:本地(开发本地运行,无需打包)、开发、测试、演示、生产。这里记录下以前项目在vue-cli2.0下怎么配置多环境打包。
如果帮助到了你,还请点个赞!!!!!
vue-cli3.0下的多环境打包,请参考我的另一篇文章:vue-cli3.0下多环境打包
创建vue-cli2.0项目
cd到项目文件夹,运行命令,创建项目
# vue init webpack obj-name //项目名不可以大写
然后会出现一系列的询问,自行选择
Tips:
后面安装其他插件的话cnpm
有时会出现莫名其妙的bug,可以使用重新指定 registry
命令解决npm
安装缓慢的问题
# npm install --registry=https://registry.npm.taobao.org
1、新增打包命令
我们在package.json
在新增自定义打包命令
2、新增config配置文件
我们在config
文件夹下新增配置文件,复制一份dev.env.js
并修改,生产环境的也对应修改成这种
3、新增build下打包配置文件(两个)
我们可以复制build.js
和webpack.prod.conf.js
文件并修改
修改下webpack.testMy.conf.js
文件
修改buildTestMy.js
文件
4、在config文件夹下的index.js里面新增配置
复制一份build的配置并修改
assetsPublicPath
要把原来的'/'
修改成‘./’
,不然打包后静态资源读取不到。
为了防止打包后css样式类文件的图片类丢失,我们可以在build/utils.js
文件下增加publicPath:'../../',
,如下:
到这里自定义的打包脚本就配置好了
下面我们要对接口地址做动态读取。打包相应环境的包,就调用相应的接口,很简单,在封装的公共api文件里面这样获取接口地址即可:
# let baseUrl = process.env.SERV_ADDR
配置完之后,我们可以在readme里面写下备注,无论谁接手项目,都会很清晰
好了,最后我们来测试下打包
我们新增的test环境的包:
默认的生产环境的包:
我们可以看到,已经可以正常的打不同环境的包了:
ok,打包好了,下面我们在测试下不同的包下面,读取接口地址吧
我们修改下 config
文件夹下的文件,写上不同的域名
然后在首页给打印出来
这是生产环境的:
ok,没问题,再来看自定义的环境的
ok,也没问题。
其他环境配置类似,不在赘述。
如果帮助到了你,还请点个赞!!!!!