Vite + Vue3设置代理和axios二次封装，api解耦

一、设置代理

文件：vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  	plugins: [
  		vue(),
  		AutoImport({
  			imports:['vue','vue-router']//自动导入vue和vue-router相关函数
  		})
  	],
 	server:{
		proxy:{
			'/api':'http://testapi.xuexiluxian.cn'
		}
	}
})

 二、axios二次封装

文件：新建utils/request.js 

import axios from 'axios';

//1. 创建axios对象
const service = axios.create();

//2. 请求拦截器
service.interceptors.request.use(config => {
  return config;
}, error => {
  Promise.reject(error);
});

//3. 响应拦截器
service.interceptors.response.use(response => {
  //判断code码
  return response.data;
},error => {
  return Promise.reject(error);
});

export default service;

 三、API解耦合

import request from '../utils/request'

export function mostNew( data ){
	return request({
		url:'/api/course/mostNew',
		method:"post",
		data
	})
}