命令
从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，所以这两种环境都是必须的。
- 先说不考虑七牛的情况，这是最简单的环境，js、css、img、fonts全部与index.html处于同一目录，那么vue.config.js中大致需要配置：
publishPath: '/serverFolder/',
... // 为简单起见，其他配置项从略
index.html中引入的js和css全部会是相对路径。
- 考虑七牛，假设你公司分配了一个子域名指向七牛，比如叫
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处变化：
- index.html文件里面引用的js等文件，路径都是
'http://yoursite.com/qiniu/'开头。 - 各个js文件之间有调用的情况，所以内部代码中出现的路径也会是
'http://yoursite.com/qiniu/'开头。
进阶
- 首先你要统计一下你公司的打包环境有多少种，随便举例，比如：
- 本机测试
- 局域网服务器测试
- 线上测试服务器测试
- 线上测试服务器测试 + 七牛云存储
- 线上生产服务器的测试目录测试
- 线上生产服务器的测试目录测试 + 七牛云存储
- 生产服务器 + 七牛云存储
然后归类，如果某两个环境的存放路径、ajax之类的参数能统一成一个，那么两个环境其实就是同一环境。
最后，给环境取名，然后开始新建环境配置文件。
改vue.config.js。
改package.json。
