【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
}
【【vue-cli】如何在测试/预发布环境使用production模式打包】如此一来测试服环境既能使用优化后的代码，又能使用测试服的地址
参考: https://cli.vuejs.org/zh/guide/mode-and-env.html
推荐阅读
- 宽容谁
- 我要做大厨
- 增长黑客的海盗法则
- 画画吗（）
- 2019-02-13——今天谈梦想（）
- 远去的风筝
- 三十年后的广场舞大爷
- 叙述作文
- 20190302|20190302 复盘翻盘
- 学无止境，人生还很长