vue-cli2多环境打包配置

背景：框架vue2+工具vue-cli2，项目需要打包两个角色，三个运行环境：本地，测试，生产，上线发布有的直接在根目录下，有的需要在二级目录下。

一、增加打包配置文件

1、config文件夹增加4个环境变量文件，build文件夹增加7个打包配置文件

2、新增环境变量文件： 添加规则按照已有环境变量添加即可，名字自己取，最好见名知意，图中的APP_USER_TYPE自定义，如果需要更多自定义变量自行增加即可。

3、新增build文件：拷贝已有build文件，修改process.env.NODE_ENV，建议使用字符串，导入env文件可能会有问题，引入同文件下对应的webpack文件

4、新增build.config.js文件，这个是自定义的。文件里的配置主要还是业务相关自己配置，server访问网址，apiPath后台api，webPath这个比较重要：config下index打包的assetsPublicPath（上线图片、css这些静态资源前缀）取这个，router的base也取这个，打包文件输出路径也是这个。

二、打包配置文件的引入

1、config下index.js文件配置修改

引入build.config.js，主要取webPath，一做文件输出路径，二做静态资源的访问路径前缀 ，三做服务器上二级目录名（ngnix配置一般也是根据这个名字）。 build配置 index和 assetsRoot主要打包输出文件的名称，平时就是默认的dist。assetsPublicPath和路由前缀对应。图中if判断中的为特殊情况，正式环境，打包需要输出路径，方便打包多个文件时不会混乱，其实在服务器是拷贝放在根目录下，所以路由前缀就不需要。

 2、router文件base修改

3、axios配置文件修改，这个主要看自己需求，本项目是因为退出登录使用了 location.href，所以需要引入

三、package.json打包命令增加

使用了cross-env

 打包效果：

四：总结

vue-cli2打包配置挺繁琐的，稍微不注意就会引错打包配置文件。建议使用vue-cli3，只需要增加一个env文件。