有错误欢迎评论指正~

安装 axios

npm install axios

拦截器配置

1、根目录新增三个文件：

• .env.development：开发环境会引用这个文件里面的配置–serve
• .env.production：生产环境–build
• .env.test：测试环境

// .env.development / .env.production / .env.test
VUE_APP_BASE_URL = "http://请求api的地址"

取值方式：process.env.VUE_APP_BASE_URL

2、vue.config.js 设置跨域 proxy：

// vue.config.js
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, // 关闭 eslint 检查
  devServer: {
    proxy: process.env.VUE_APP_BASE_URL,	// 配置跨域
  }
});

3、新增 request.js 文件配置拦截器

// request.js
import axios from "axios";

// 创建axios实例
let service: any = {};
service = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL, // api的base_url
    timeout: 50000 // 请求超时时间
  });

// request拦截器 axios的一些配置
service.interceptors.request.use(
  (config: any) => {
    return config;
  },
  (error: any) => {
    // Do something with request error
    console.error("error:", error); // for debug
    Promise.reject(error);
  }
);

// respone拦截器 axios的一些配置
service.interceptors.response.use(
  (response: any) => {
    return response;
  },
  (error: any) => {
    console.error("error:" + error); // for debug
    return Promise.reject(error);
  }
);

export default service;

// api.js
export const api:object = {
	propName: "/a/b/c"
}

export default api;

引用

main.js

// main.ts
import service from './utils/request'
import api from './config/api'

app.config.globalProperties.$https = service;
app.config.globalProperties.$urls = api;