前言
一般在我们项目开发中,一般会有以下3个环境
- 开发环境也叫测试环境(test)
- RC环境也叫预发布环境(rc)
- 线上环境(production)
场景
那么有一种情况是我们需要在不同环境下区分不同的api接口例如
- 开发环境也叫测试环境(test) api=test.ydhtml.com
- RC环境也叫预发布环境(rc) api=rc.ydhtml.com
- 线上环境(production) api=ydhtml.com
指令
在一个 Vue CLI 项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。
vue-cli-service serve
1 | 用法:vue-cli-service serve [options] [entry] |
vue-cli-service build
1 | 用法:vue-cli-service build [options] [entry|pattern] |
以上是两个常用的cli指令,他们默认对应的分别是development和production模式
创建环境
接下来我们依次在项目的根目录中创建三个文件分别对应三个环境,文件名如下
1 | .env.test |
.env.test文件内容如下
1 | NODE_ENV=production // 表明这是生产环境(需要打包,不加的话,打包只会生成一个app.js文件) |
.env.rc文件内容如下
1 | NODE_ENV=production // 表明这是生产环境(需要打包,不加的话,打包只会生成一个app.js文件) |
.env.production文件内容如下
1 | NODE_ENV=production // 表明这是生产环境(需要打包,不加的话,打包只会生成一个app.js文件) |
只有VUE_APP_开头的环境变量可以在项目代码中直接使用
配置好对应得环境之后,我们在 package.json
下得 scripts
增加打包命令,如下
1 | "build": "vue-cli-service build --mode production", |
最后
最后我们在页面里面使用,代码如下1
2
3
4
5
6
7
8
9
10
11
// http.js
import axios from 'axios'
const api = {
production: 'http://ydhtml.com',
test: 'http://test-ydhtml.com',
rc: 'http://rc-ydhtml.com'
}
axios.defaults.baseURL = api[process.env.VUE_APP_NODE_ENV]