新建 service.js 文件

// axiso 的二次封装
import axios from 'axios'
import { getToken } from '@/utils/setToken.js'
import { Message } from 'element-ui'

const service = axios.create({
    baseURL: '/api', // baseURL会自动加在请求地址上(代理中遇到 /api 就会重写请求地址)
    timeout: 3000
})

// 添加请求拦截器
service.interceptors.request.use((config) => {
    // 在请求之前做些什么(获取并设置token)
    config.headers['token'] = getToken('token')
    return config
}, (error) => {
    return Promise.reject(error)
})

// 添加响应拦截器
service.interceptors.response.use((response) => {
    // 对响应数据做些什么
    let { status, message } = response.data
    if(status !== 200) {
        Message({message: message || 'error', type: 'warning'})
    }
    return response
}, (error) => {
    return Promise.reject(error)
})

export default service

在 main.js 中修改

// 导入二次封装的axios 
import service from './service.js'

Vue.prototype.service = service // 挂载到原型，可以在全局使用

使用代理

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    open: true, // 本地运行自动打开项目
    host: 'localhost', 
    // 代理
    proxy: {
      '/api': {
          target: 'http://1.116.64.64:5004/api2/', // 目标路径
          // secure: false,  // 如果是https接口，需要配置这个参数
          changeOrigin: true, // 是否跨域
          pathRewrite: { // 重新路径
              '^/api': ''
          }
      }
    }
  },

})

封装对应的接口

在 src 下新建 api 文件夹，新建 api.js文件

// 项目中我们大多数时候都会把对应的接口请求封装成api来调用
import service from '../service.js'
// import qs from 'qs'

// 登录接口
export function login(data) {
    return service({
        method: 'post',
        url: '/login',
        data
    })
}