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

Posted 2023-04-02

参考技术A 从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，所以这两种环境都是必须的。

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

怎么实现2种环境？

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

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

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

原本是：

现在改为

新增一行打包命令：

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

vue-cli3 配置不同环境请求地址，以及打包到不同文件夹

参考技术A

.env.development

.env.test

.env.production

如果一个环境中，有多个不同请求地址，可以在环境配置文件中多配置几个 url，使用时，不配置 baseURL，相同请求地址接口写入一个文件，引入相应的 url，接口前单独加 url。

package.json scripts 配置

serve 命令不携带 --mode 时，默认运行环境为 development
build 命令不携带 --mode 时，默认运行环境为 production

可根据当前环境写死，也可在环境配置文件中，加入打包到的文件夹名（有多个环境的时候比较方便）。

vue.config.js 配置

打包出来的文件不提交到 git 的话，配置 .gitignore。 将之前的 /dist 改为 /*dist