Vite + Vue3设置代理、axios二次封装与api解耦

基本思路：

一、在vite.config.js文件设置代理
另外：这里推荐一款插件unplugin-auto-import。作用：ref reactive watch 等此类api无须import 导入 ，可以直接使用，方便开发

npm i -D unplugin-auto-import

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'],
  			dts:"src/auto-import.d.ts" // 生成在src路径下名为auto-import.d.ts的声明文件
  		})
  	],
 	server:{
		proxy:{
			'/api':'http://testapi.dongfang.cn'
		}
	}
})

二、axios二次封装，新建utils/request.js

npm install axios -S

import axios from 'axios';

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

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

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

export default http;

三、API解耦
新建一个js文件，业务接口请求统一管理

import request from '../utils/request'

export function getList( data ){
	return request({
		url:'/api/sourse/List',
		method:"post",
		data
	})
}