命令

从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全部会是相对路径。

2. 考虑七牛，假设你公司分配了一个子域名指向七牛，比如叫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. 首先你要统计一下你公司的打包环境有多少种，随便举例，比如：

• 本机测试
• 局域网服务器测试
• 线上测试服务器测试
• 线上测试服务器测试 + 七牛云存储
• 线上生产服务器的测试目录测试
• 线上生产服务器的测试目录测试 + 七牛云存储
• 生产服务器 + 七牛云存储

2. 然后归类，如果某两个环境的存放路径、ajax之类的参数能统一成一个，那么两个环境其实就是同一环境。

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

4. 改vue.config.js。

5. 改package.json。