vue使用config.js配置全局axios路由

要在Vue项目中全局配置axios和路由，可以按照以下步骤进行：

1. 安装axios和vue-router

npm install axios vue-router --save

2. 在src目录下创建一个config.js文件，用于存放全局配置

import axios from 'axios'
import router from '../router'

// axios配置
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.timeout = 5000

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 如果有token则添加到请求头中
    if (localStorage.token) {
      config.headers.Authorization = localStorage.token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
axios.interceptors.response.use(
  response => {
    // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
    // 否则的话抛出错误
    if (response.status === 200) {
      return Promise.resolve(response)
    } else {
      return Promise.reject(response)
    }
  },
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        // 未登录则跳转登录页面，并携带当前页面的路径
        // 在登录成功后返回当前页面，这一步需要在登录页操作。
        case 401:
          router.replace({
            path: '/login',
            query: { redirect: router.currentRoute.fullPath }
          })
          break
        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页面
        case 403:
          alert('登录过期，请重新登录')
          // 清除token
          localStorage.removeItem('token')
          // store.commit('loginSuccess', null)
          setTimeout(() => {
            router.replace({
              path: '/login',
              query: { redirect: router.currentRoute.fullPath }
            })
          }, 1000)
          break
        // 404请求不存在
        case 404:
          alert('网络请求不存在')
          break
        // 其他错误，直接抛出错误提示
        default:
          alert(error.response.data.message)
      }
      return Promise.reject(error.response)
    }
  }
)

export default axios

3. 在main.js中引入config.js文件，并将axios和router挂载到Vue.prototype上

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from './config'

Vue.config.productionTip = false

Vue.prototype.$axios = axios
Vue.prototype.$router = router

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

现在可以在Vue项目的任何地方使用axios和router了。