Vue-cli3.0 分环境运行/打包

前文 ：
最近项目中需要新增一个灰度环境，所以要新增运行环境配置。太久没复习vue-cli的配置知识有点忘记了，后面查询资料配置完成，此文章作为记录以防后面忘记。
正文：
我们使用vue-cli构建完项目后，会有一个package.json文件，里面有scripts属性，如下：

"scripts": {
     
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
  },

这是默认配置，当我们项目需要进行分环境时(开发环境|测试环境|灰度|生产)，就可以在此处进行配置。
配置之前我们需要知道 vue-cli-service serve 和 vue-cli-service build 命令 配置参数，如下：

命令：vue-cli-service serve [options]
参数：options:
  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将 URL 复制到剪切版
  --mode    指定环境模式 (默认值：development)
  --host    指定 host (默认值：0.0.0.0)
  --port    指定 port (默认值：8080)
  --https   使用 https (默认值：false)

命令：vue-cli-service build [options]
参数：options:
  --mode        指定环境模式 (默认值：production)
  --dest        指定输出目录 (默认值：dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值：app)
  --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

知道上述配置参数之后我们就能进行自定义配置了：下面是我配置完成的scripts属性：

"scripts": {
     
    "dev": "vue-cli-service serve",
    "uat": "vue-cli-service serve --mode testing",
    "stag": "vue-cli-service serve --mode staging",
    "prod": "vue-cli-service serve --mode production",
    "build": "vue-cli-service build --mode development",
    "build:test": "vue-cli-service build --mode testing",
    "build:prod": "vue-cli-service build --mode production",
    "build:stage": "vue-cli-service build --mode staging",
 },

同时我们还要创建区分环境的.env文件(webpack会读取)

// .env.development   文件   开发环境
NODE_ENV = development
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = '/dev-api'

其他环境格式同

除了配置package.json文件之外，我们还需要在自己的全局API地址配置文件进行环境区分：

// 此处通过判断process.env.NODE_ENV 的值来区分环境，我们运行命令(package.json中scripts属性中的key)时 传的参数 将会赋值到process.env.NODE_ENV
if(process.env.NODE_ENV === 'development') {
     
	// 此处将API地址改为开发环境的地址
}else if(process.env.NODE_ENV === 'testing') {
     
	// 此处为测试环境地址
}else if(process.env.NODE_ENV === 'staging') {
     
	// 此处为灰度环境地址
}else if(process.env.NODE_ENV === 'production') {
     
	// 此处为生产环境地址
}else {
     
	// 此处为默认环境地址
}

弄完之后我们执行：
npm run dev 那么项目跑完就是默认请求开发环境的地址
npm run uat 请求的测试环境的地址

npm run build 打包请求开发环境的包
npm run build:prod 打包生产环境包