Vue CLI中善用--mode实现多种打包环境

命令

从package.json中可以看到,Vue CLI默认的构建命令是"build": "vue-cli-service build",但是这只能打出一种生产包,那么如何打出多种生产包呢?可以用--mode参数。

官方文档

环境变量和模式:https://cli.vuejs.org/zh/guide/mode-and-env.html

需求举例

比如公司有一个要求,js、css、img、fonts文件必须存到CDN,比如七牛。这时候我至少要有2种打包环境,一种是不考虑七牛,一种是考虑七牛,因为上传到七牛需要另外花时间去操作,所以我可能首先考虑的不是“存不存到七牛”的问题,而是最快速测试程序是否正常、无Bug,所以这两种环境都是必须的。

  1. 先说不考虑七牛的情况,这是最简单的环境,js、css、img、fonts全部与index.html处于同一目录,那么vue.config.js中大致需要配置:
publishPath: '/serverFolder/',
... // 为简单起见,其他配置项从略

index.html中引入的js和css全部会是相对路径。

  1. 考虑七牛,假设你公司分配了一个子域名指向七牛,比如叫http://yoursite.com/qiniu/,你希望index.html引入的文件全部来自于这个域名,但是index.html本身应使用http://www.yoursite.com/serverFolder/,那么就应该这么配置:
publishPath: 'http://yoursite.com/qiniu/',
... // 其他配置项从略

怎么实现2种环境?

新建环境配置文件

在项目根目录新建.env.qiniu,内容先写2行:

MODE='qiniu'
NODE_ENV='production'

根据官方文档,我们可以衍生出2个“流派”的做法:

  • 流派一,这个文件一共就写2行,不再多写,其他所有的配置都在vue.config.js里根据process.env.MODE === 'qiniu'来实现配置。
  • 流派二,在这个文件写满对应的配置,在vue.config.js则直接调用。

用哪一种都可以,我以第一种为例来继续说明。

修改vue.config.js

原本是:

publishPath: '/serverFolder/',
... // 其他配置项从略

现在改为

publishPath: process.env.MODE === 'qiniu'
? 'http://yoursite.com/qiniu/'
: '/serverFolder/',
... // 其他配置项从略

修改package.json

新增一行打包命令:

"qiniu": "vue-cli-service build --mode qiniu",

效果

运行构建yarn qiniu命令之后,会发生2处变化:

  1. index.html文件里面引用的js等文件,路径都是'http://yoursite.com/qiniu/'开头。
  2. 各个js文件之间有调用的情况,所以内部代码中出现的路径也会是'http://yoursite.com/qiniu/'开头。

进阶

  1. 首先你要统计一下你公司的打包环境有多少种,随便举例,比如:
  • 本机测试
  • 局域网服务器测试
  • 线上测试服务器测试
  • 线上测试服务器测试 + 七牛云存储
  • 线上生产服务器的测试目录测试
  • 线上生产服务器的测试目录测试 + 七牛云存储
  • 生产服务器 + 七牛云存储
  1. 然后归类,如果某两个环境的存放路径、ajax之类的参数能统一成一个,那么两个环境其实就是同一环境。

  2. 最后,给环境取名,然后开始新建环境配置文件。

  3. 改vue.config.js。

  4. 改package.json。