前文 :
最近项目中需要新增一个灰度环境,所以要新增运行环境配置。太久没复习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 打包生产环境包