vue-cli-service 项目多环境配置

通过文件配置区分开发环境、测试环境、生产环境

开发和部署中通常会遇到针对不同的环境进行打包的需求，环境可能会很多，如何更方便的写好 scripts 配置呢？

官网只提供了 build --mode --dest 等等几个命令选项，但没说得很清楚，无法满足以上需求。下面的方法可以更方便的配置：

package.json:

{
	"scripts": {
		"dev": "vue-cli-service serve",
		"build:test": "vue-cli-service build --mode test",
		"build:production": "vue-cli-service build --mode production"
	}
}

然后在 package.json 同级的根目录下，创建三个文件：

• .env（开发环境的配置）

NODE_ENV = development
VUE_APP_BASE_URL = http://localhost:8080/

• .env.test（测试环境的配置）

NODE_ENV = test
VUE_APP_BASE_URL = http://XXX.test.com/

• .env.production（生产环境配置）

NODE_ENV = production
VUE_APP_BASE_URL = http://XXX.com/

补充 npm 脚本冷知识：利用 npm 钩子，实现生产环境下部署的自动化操作

npm 钩子，就是命令（工作流）的执行增加类似生命周期钩子的一种机制，npm提供了两种钩子，pre和post，其作用分别是在构建前做检查、构建后做清理等场景。比如：

• prebuild / build / postbuild 和 preinstall / install / postinstall

当执行npm run build 时，会按照 npm run prebuild && npm run build && npmrun postbuild 顺序执行。

应用场景举例

• build 前 执行 eslint （prebuild）
• build之前执行unit test，生成测试覆盖率报告（prebuild）
• 部署前把上一个版本copy一份作备份。（prebuild）
• build 之后，将生成的静态文件拷贝至 Apache 服务目录下。（postbuild）