// vue.config.js
module.exports = {
// lintOnSave: false,
publicPath: './',
outputDir: 'dist',
// transpileDependencies: [
// /@lerna-demo/
// ],
devServer: {
host: process.env.VUE_APP_BASE_HOST,
port: process.env.VUE_APP_BASE_PORT,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api': {
target: process.env.VUE_APP_BASE_API,
changeOrigin: true
},
}
}
}
// .env.development
ENV = 'development'
# base api
VUE_APP_BASE_API = 'http://192.168.9.83'
VUE_APP_BASE_PORT = 3000
VUE_APP_BASE_HOST = 192.168.9.83
// http.js
/**
* axios封装
* 请求拦截、响应拦截、错误统一处理
*/
import axios from 'axios'
import qs from 'qs'
import {
Message
} from 'element-ui'
/**
* 提示函数
* 禁止点击蒙层、显示一秒后关闭
*/
const tip = (msg) => {
Message({
message: msg,
duration: 1000 * 5,
type: 'error'
})
}
/**
* 跳转登录页
* 携带当前页面路由,以期在登录页面完成登录后返回当前页面
*/
const toLogin = () => {
}
/**
* 请求失败后的错误统一处理
* @param {Number} status 请求失败的状态码
*/
const errorHandle = (status, other) => {
// 状态码判断
switch (status) {
// 100: 请求参数有误
case 400:
tip(other)
// toLogin();
break
// 403 token过期
// 清除token并跳转登录页
case 101:
tip('无权限查看')
setTimeout(async () => {
toLogin()
}, 1000)
break
// 404请求不存在
case 401:
tip(other)
setTimeout(async () => {
toLogin()
}, 1000)
break
case 404:
tip(other)
break
default:
console.log('other', other)
}
}
// 创建axios实例
var instance = axios.create({
timeout: 0
})
// 设置post请求头
instance.defaults.headers.post['Content-Type'] =
'application/json;charset=UTF-8'
instance.defaults.baseURL = process.env.VUE_APP_BASE_API
/**
* 请求拦截器
* 每次请求前,如果存在token则在请求头中携带token
*/
instance.interceptors.request.use(
(config) => {
// 登录流程控制中,根据本地是否存在token判断用户的登录情况
// 但是即使token存在,也有可能token是过期的,所以在每次的请求头中携带token
// 后台根据携带的token判断用户的登录情况,并返回给我们对应的状态码
// 而后我们可以在响应拦截器中,根据状态码进行一些统一的操作。
// const token = store.state.user.token
// const uid = store.state.user.uid
// token && (config.headers['access-token'] = token)
// uid && (config.headers['token-uid'] = uid)
return config
},
(error) => Promise.error(error)
)
// 响应拦截器
instance.interceptors.response.use(
// 请求成功
(res) => {
const {
data
} = res
if (data.code === 200) {
return Promise.resolve(data)
} else {
errorHandle(data.code, data.msg)
return Promise.reject(res)
}
},
// 请求失败
(error) => {
const {
response
} = error
if (response) {
// 请求已发出,但是不在0的范围
errorHandle(response.code, response.msg)
return Promise.reject(response)
} else {
// 处理断网的情况
// eg:请求超时或断网时,更新state的network状态
// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
// 关于断网组件中的刷新重新获取数据,会在断网组件中说明
if (!window.navigator.onLine) {
// store.commit('changeNetwork', false)
} else {
return Promise.reject(error)
}
}
return Promise.reject(error)
}
)
const get = (url, params = {}) => {
return instance.get(url, {
params
})
}
const post = (url, params = {}) => {
return instance.post(url, qs.stringify(params), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
})
}
export {
get,
post
}