前言

我们已经完成了路由配置，本节我们将从Vue2项目中恢复axios配置。由于旧项目使用了webpack而新项目使用了vite，因此有一些差异。

# "axios": "^1.6.2",
npm i --save axios

创建配置文件

按照如下结构创建配置文件

src
 ├─axios
 │  └─index.js  # 配置axios实例
 ├─api
 │  └─index.js  # 配置后台接口

配置axios实例

编辑axios/index.js

import axios from 'axios'

// 设置headers的方式不同，vue3在拦截器中
// axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
// 创建axios实例
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: "/api",
    // 超时
    timeout: 120000
});
// request拦截器
service.interceptors.request.use(
    config => {
        config.headers['Content-Type'] = 'application/json;charset=utf-8';
        return config;
    },
    (error) => {
        console.log(error);
        Promise.reject(error)
    }
);

export default service

配置后台接口

编辑api/index.js，和vue2中没什么不同

import request from '@/axios'

// 获取网站信息
export function getSiteInfo(query) {
    return request({
        url: '/f/info',
        method: 'get',
        params: query
    })
}

配置vite.config.js

server: {
    host: 'localhost',
    port: port,
    strictPort: false,
    proxy: {
        // detail: https://cli.vuejs.org/config/#devserver-proxy
        '/api': {
            target: `http://127.0.0.1:8888`,
            // target: `http://103.82.54.214:8888/`,
            changeOrigin: true,
            rewrite: (path) => path.replace(/^/api/, '')
        }
    },
}

Quote

vite搭建项目的axios配置，处理代理及环境变量 - 掘金 (juejin.cn)

vue3+vite+axios 配置连接后端调用接口_vite配置后端接口地址-CSDN博客

vite.config.js常用配置 - 掘金 (juejin.cn)

WEBPACK、VITE 常用配置（对照）及迁移指南 - 掘金 (juejin.cn)