1. 【环境变量】背景:
- 在我们的实际项目开发中,一般会区分几个环境,分别是
开发环境
、测试环境
和生产环境
,当然不排除分的比较细的还有预发布环境
,一般来说这四个环境就足够我们使用了。
2. 新建环境步骤:
-
2.1 在根目录下新建4个环境变量文件:
-
.env.dev
【开发环境】
-
.env.test
【测试环境】
-
.env.uat
【预发布环境】
-
.env.prod
【生产环境】
- 四个环境内的文件内容如下:
//.env.dev文件
NODE_ENV = dev
# base url
VUE_APP_BASE_URL = "https://dev.it98k.cn"
--------------------------------------------------------------
//.env.test文件
NODE_ENV = test
# base url
VUE_APP_BASE_URL = "https://test.it98k.cn"
--------------------------------------------------------------
//.env.uat文件
NODE_ENV = uat
# base url
VUE_APP_BASE_URL = "https://uat.it98k.cn"
--------------------------------------------------------------
//.env.prod文件
NODE_ENV = prod
# base url
VUE_APP_BASE_URL = "https://prod.it98k.cn"
--------------------------------------------------------------
2.2 然后修改package.json
【scripts】下的启动命令:
"scripts": {
"serve": "vue-cli-service serve --mode dev",
"build:test": "vue-cli-service build --mode test",
"build:uat": "vue-cli-service build --mode uat",
"build:prod": "vue-cli-service build --mode prod"
},
- 这样修改完,本地启动项目命令依然是:
npm run serve
- 打包测试环境的命令是:
npm run build:test
- 打包预发布环境的命令是:
npm run build:uat
- 打包生产环境的命令是:
npm run build:prod
3. 【基于axios的二次封装】背景:
- 在实际开发项目中,网络请求基本上使用axios网络请求工具,但是单纯的使用像
axios.get('http://xxxxx.com')
来请求接口,随着项目越来越大,页面越来越多,功能越来越完善,我们势必会写大量的axios请求,每次都这么写,费时费力,也不方便统一管理,所以,需要将axios进行二次封装,以达到我们开发项目的时候省时、省力、省心。
-
3.1 第一步,在src
目录下,新建utils/request.js
文件,文件内容如下:
//首先引入axios
import axios from 'axios'
//然后通过create方法来创建一个请求服务
//然后create方法内有一些配置项,比如接口域名`baseURL`、接口请求超时时间`timeout`
//接口url`url`
//接口请求方式`method`等等,需要我们按需传入
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_URL, // 完整的api地址 = 接口域名+ 接口路径
timeout: 5000 // 请求超时时间 5s
})
//下面会定义两个拦截器,分别是 `请求拦截器`,`响应拦截器`
//`请求拦截器`是前端请求后端接口前处理的一些逻辑,比如开启loading,配置header请求头等等
//`响应拦截器`就是后端响应我们前端,返回回来的数据,比如我们可以在这响应拦截器内拿到status Code
//拿到后端接口返回的code,关闭loading、根据code码处理一些详细的逻辑等等一系列操作
//request interceptor 请求拦截器
service.interceptors.request.use(
config => {
// do something before request is sent。在发送请求之前做一些事情
config.headers['token'] = "xxxxxx"
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor 响应拦截器
service.interceptors.response.use(
response => {
const res = response.data
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 200) {
alert(res.message || 'Error')
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
alert(res.message || 'Error')
return Promise.reject(error)
}
)
// 最后暴露我们声明的 service 服务
export default service
4. api的封装与使用
- api请求方法,也是要做一个封装的,封装流程如下
-
4.1 在src
目录下新建api/index.js
文件,文件内容如下:
import request from '../utils/request';
//登录接口,post方式传参用data
export function login(data) {
return request({
url: '/api/login',
method: 'post',
data
})
}
//获取xx列表接口,get方式传参用params
export function getList(params) {
return request({
url: '/api/getList',
method: 'get',
params
})
}
-
4.2 使用封装好的api
- 在需要的页面,比如我们的登录页面需要调用登录接口,我们就要这样用
//首先第一步要用import导入进来我们的登录接口
import { login } from '../api/index'
//然后直接调用login方法
login({username:'admin',password:"123456"}).then(res=>{
console.log(res);
})