1.axios二次封装
1.1 新建文件目录
- project/src/utils/request.js
- project/src/api/api.js
1.2 封装axios
// project/src/utils/request.js
import axios from 'axios'
const service = axios.create({
baseURL: buildURL, // 请求地址
timeout: 1000 * 5 // 超市时间
})
// 请求拦截器
service.interceptors.request.use(function(config) {
// 对请求进行处理
// config.headers['token']
return config
}, function(error) {
return Promise.reject(error);
})
// 响应拦截器
service.interceptors.response.use(function(response) {
return response;
}, function(error) {
// 错误处理
if (error && error.response) {
switch (error.response.status) {
case 401:
alert('401身份认证过期')
break;
case 404:
alert('404请求出错')
break;
case 500:
alert('500服务器错误')
break;
default:
}
}
})
export default service
1.3 封装请求
// project/src/api/api.js
import request from '../utils/request.js'
// 请求地址
const api = {
login:'localhost:8080', // 登录
// ...
}
// 请求
export function login(params) {
return request({
url: api.login,
method: 'post',
params
})
}
//...
1.4 页面内使用
// 登录页面
import { login } from '../../api/api.js'
export default {
name: 'login',
data() {
return {
loginInfo:{
username: '',
password: '',
}
}
},
methods: {
onLogin() {
// 发起请求
login(loginInfo).then(res => {
if (res.data.errorCode) {
// alert(res.data.errorMessage)
} else {
// do something
}
})
.catch(error => {
// alert(error)
})
}
}
}
2.配置打包环境
2.1 项目下新建三个文件
文件名:.env.development (开发环境)
代码:
NODE_ENV = 'development'
VUE_APP_TITLE = 'build-dev'
文件名:.env.production (生产环境)
代码:
NODE_ENV = 'production'
VUE_APP_TITLE = 'build-pro'
文件名:.env.test (测试环境)
代码:
NODE_ENV = 'test'
VUE_APP_TITLE = 'build-test'
2.2 修改package.json文件
"scripts": {
"serve": "vue-cli-service serve",
"build-dev": "vue-cli-service build --mode development",
"build-pro": "vue-cli-service build --mode production",
"build-test": "vue-cli-service build --mode test"
}
2.3 配置buildURL
// request.js
let buildURL = ''
switch (process.env.NODE_ENV) {
case 'development':
buildURL = "开发环境地址"
break
case 'production':
buildURL = "生产环境地址"
break
case 'test':
buildURL = "测试环境地址"
break
}
2.4 使用
- 打包开发环境:
npm run build-dev
- 打包生产环境:
npm run build-pro
- 打包测试环境:
npm run build-test