一、安装依赖包
npm install axios -S
npm install qs -S
npm install js-cookie
文件目录
二、配置线上、本地环境
与src文件同级,分别创建本地环境文件 .env.development 和线上环境文件 .env.production
# 本地环境
ENV = development# 本地环境接口地址
VITE_API_URL = http://localhost:3000# 本地环境接口地址
VITE_API_URL2 =
# 线上环境
ENV = production# 线上环境接口地址
VITE_API_URL =# 线上环境接口地址
VITE_API_URL2 = http://jsonplaceholder.typicode.com
三、配置请求文件 src/api/base.ts
import axios from 'axios'
import qs from 'qs'
import { Dialog } from 'vant'
import { Session } from '../utils/storage'
// 创建 Axios 实例
const instance = axios.create({
// baseURL: 'https://api.uomg.com/api', // 替换为你的 API 基础路径
timeout: 10000, // 请求超时时间(单位:毫秒)
headers: {
'Content-Type': 'application/json',
},
paramsSerializer: {
serialize(params) {
return qs.stringify(params, { allowDots: true })
},
},
})
// 配置多个baseurl
instance.interceptors.request.use(
(config: any) => {
if (config.url.startsWith('/url3')) {
config.baseURL = import.meta.env.VITE_API_URL2
} else {
config.baseURL = import.meta.env.VITE_API_URL
}
return config
},
(error) => {
return Promise.reject(error)
},
)
// 请求拦截器(不需登录校验)
instance.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么,比如添加 token
const token = localStorage.getItem('token') // 示例:从本地存储获取 token
if (token && config.headers) {
config.headers.Authorization = `Bearer ${token}`
}
return config
},
(error) => {
// 处理请求错误
return Promise.reject(error)
},
)
// 响应拦截器(不需登录校验)
instan