Vue项目 vue.config.js配置 & request.js一次封装axios

vue.config,js

module.exports = {
  publicPath: './',
  lintOnSave: false,//每次保存代码的时候是否启动eslint
  devServer: {
    host: '127.0.0.1',
    port: 8080,
    open: true,//项目启动时自动打开浏览器
    proxy: {
      '/api': {// '/api'是代理的标识 url前面的/api是使用代理的
        target: 'http://testapi.....cn/',//接口地址
        changeOrigin: true,//跨域
      }
    }
  },
  configureWebpack: {
    plugins: [
    ],
  },
};

common > api > request.js

import axios from 'axios'
import { MessageBox } from 'element-ui'

//默认请求头
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'

//创建axios对象
const service = axios.create()

//请求拦截器
service.interceptors.request.use(req => {
  req.headers['Cathe-Control'] = 'no-cache' //访问此页面时 不会在internet的临时页面中留下备份
  return req
}, error => {//没拦截上
  Promise.reject(error)
})

//响应拦截器
service.interceptors.response.use(res => {
  //未设置状态码则默认成功状态
  if (res.request.responseType == 'blob') {
    return res.data
  }
  const code = res.data.meta.code

  if (code === '50002') { //如果获取到错误信息
    MessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
      confirmButtonText: '重新登录',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      window.location.href = '/home'
    }).catch((err) => {
      console.log(err)
    })
    return Promise.reject('error')
  } else {//如果没有错误信息
    return res.data
  }
}, error => {//没拦截上
  return Promise.reject(error)
})

export default service;

common/api/webConfig.js

import request from './request'

export default {
  //请求网站配置
  webConfig() {
    return request({
      url: '/api/setting/get'
    })
  }
}

components>foot>Foot.vue

import request from './request'

export default {
  //请求网站配置
  webConfig() {
    return request({
      url: '/api/setting/get'
    })
  }
}