以vue为例
一、在.env.development和 .env.production文件中设置基础路径
1.1 : 文件名不可乱改
1.2:声明的变量必须以 VUE_APP_XXX为开头,并且都是大写
比如:开发环境路径:
比如:生产环境路径:
二、axios拦截器的配置
如上图生产和开发环境都定义了两个基础变量,分别为:VUE_APP_BASE_API 和 VUE_APP_BASE_API_OL(不同的变量对应不同服务器的基础路径)
所以也需要声明两个拦截器。存在于不同的文件,分别为:request.js 和 requestTest.js
如下:
request.js文件的内容如下:
import axios from 'axios';
// 重点就是这里 取的就是前边提到的.env.development和 .env.production文件
// 取决于环境变量或者说你运行的时候是哪个。
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
timeout: 300000 // request timeout
});
service.interceptors.request.use(
config => {
if (!config.headers['X-Token']) {
config.headers['X-Token'] = `${store.getters.token || ''}`;
}
if (!config.headers['language']) {
config.headers['language'] = `${store.getters.language}`;
}
return config;
},
err => Promise.reject(err)
);
// response interceptor
service.interceptors.response.use(
response => {
const res = response.data;
if (res.code !== 20000) {
// Message({
// message: res.message || 'Error',
// type: 'error',
// duration: 5 * 1000
// })
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
store.dispatch('user/resetToken').then(() => { // 退出登录的函数
location.reload()
})
}
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
// 没有发送请求
if (!error.response) {
if (error.message.indexOf('Network Error') < 0) {
// 1. 没有token
// Message({
// message: error.message,
// type: 'error',
// duration: 3 * 1000
// })
router.currentRoute.path !== '/login' && router.replace('/login') // 跳转到登录页面
}
} else {
// token 过期 或 失效 localStorage.getItem('exp')
const tokenEXP = localStorage.getItem('exp')
const currentDate = Date.parse(new Date()).toString().slice(0, 10)
if (currentDate >= tokenEXP) {
store.dispatch('user/logout').then(() => { // 退出登录
router.push({ name: 'Login' })
// Message({
// message: 'login timeout. Please login again',
// type: 'error',
// duration: 2 * 1000
// })
})
} else {
if (error.message.indexOf('Network Error') >= 0) return
store.dispatch('user/logout').then(() => {
router.push({ name: 'Login' })
// Message({
// message: error.response.data, // Object.values(error.response.data)[0]
// type: 'error',
// duration: 3 * 1000
// })
})
}
}
return Promise.reject()
});
export default service
requestTest.js 同上,着重修改内容:
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API_OL, // api 的 base_url
timeout: 300000 // request timeout
});
三、axios发送请求
定义js文件为 testSend.js 文件:
import request from '@/utils/request' // 将拦截器request的js文件引入
import requestTest from '@/utils/requestTest' // 将拦截器requestTest的js文件引入
export function getRequest(data) {
return request({ // 使用request函数发送请求
url: '/vue-element-admin/user/login', // 后台接口路径
method: 'post', // 发送请求的方式
data // 携带的参数
})
}
export function getRequestTest(data) {
return requestTest({ // 使用 requestTest 函数发送请求
url: '/member', // 后台接口路径
method: 'get', // 发送请求的方式
params: data // 携带的参数
})
}
四、proxy跨域代理的配置
在config.js文件中找到 devServer 对象,例如:
在vue.config.js文件中 找到 devServer 对象,
devServer: {
port: 8080, // 端口号,可修改成自己的端口号
open: true, // 是否自动打开
overlay: {
warnings: false,
errors: true
},
proxy: { // 配置代理
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: 'xxx', // 服务器地址
changeOrigin: true,
ws: false
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},
[process.env.VUE_APP_BASE_API_OL]: {
ws: false,
target: 'http://192.168.1.22:3000/', // 服务器地址
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API_OL]: ''
}
}
},
after: require('./mock/mock-server.js') // 连接本地 mockjs 的数据
},