vue3(vite)设置代理封装axios api解耦功能
微光无限 人气:0一、设置代理
打开根目录下的vite.config.js文件,设置代理
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], // 设置代理 server: { proxy: { '/api': 'xxx' } } })
二、axios封装
先下载axios
npm install axios -S
在根目录下新建utils/request.js,简单封装axios
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文件
在utils文件夹下创建文件夹api创建courseManage.js文件
import request from './request' export function Fun( data ){ return request({ url:'xxx', method:"post", data }) }
四、安装unplugin-auto-import插件(vite版本)
npm i unplugin-auto-import -D
打开vite.config.js中配置unplugin-auto-import
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // 引入unplugin-auto-import/vite插件 import AutoImport from 'unplugin-auto-import/vite' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue(), AutoImport({ imports: ['vue', 'vue-router']//自动导入vue和vue-router相关函数 }) ], // 设置代理 server: { proxy: { '/api': 'http://testapi.xuexiluxian.cn' } } })
加载全部内容