前言
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
网友评论