【vue-cli】如何在测试/预发布环境使用production

前言

vue-cli的打包📦模式有3种： development、test、production，其中development和test使用的是未优化的打包方式，于是问题出现了：

问题

如果我需要 把项目部署到测试环境，如果使用npm build --mode test，则打包出来的代码没有进行优化，导致测试服访问网页变卡，如果用production模式，就很难区分测试服和线上的环境了，那么测试服如何能兼顾打包优化和配置的正确性呢？

原因和思路

个人猜测：vue-cli设置test模式，目的是针对单元测试提供的环境，而不是我们认为的预发布环境。

为了能在测试服构建优化后的代码，思路有2种：

1.针对test/develop模式的webpack配置进行优化

具体操作

我们把vue-cli内建的webpack配置（优化模式和非优化模式）打印出来。使用如下命令：

echo "module.exports = $(vue inspect --mode production)" > cfg.prod.js
echo "module.exports = $(vue inspect --mode test)" > cfg.test.js

这样就会在你项目根目录下产生cfg.prod.js和cfg.test.js2个文件
比对2者配置，可以清楚地看到：生产模式的打包增加了minimizer、splitChunks等代码拆分/压缩优化配置

分析以后，把prod的配置写入到vue.config.js中即可

2.另一种更简单的方式

测试环境同样使用production模式，再通过配置文件把原本属于线上的配置覆盖成测试服的

具体操作

假设我测试环境api地址是api-test.foo.com，线上环境为api.foo.com

• 在项目根目录下创建名为.env.test文件

• 在该文件中写入NODE_ENV和测试环境需要的配置：

NODE_ENV=production
VUE_APP_TEST=1
VUE_APP_API=api-test.foo.com

注意：变量必须以VUE_APP_开头

• 在项目中引用时，判断是否为测试服环境，如果是就把api地址覆盖成测试服的

let api = 'api.foo.com'
if (process.env.VUE_APP_TEST) {
  api = process.env.VUE_APP_API; // api-test.foo.com
}

如此一来测试服环境既能使用优化后的代码，又能使用测试服的地址
参考: https://cli.vuejs.org/zh/guide/mode-and-env.html