背景:框架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文件。

Logo

前往低代码交流专区

更多推荐