1、安装mockjs
yarn add mockjs -S 或 npm i mockjs -D
2、安装vite-plugin-mock
npm i vite-plugin-mock -D
3、在src目录下创建mock文件夹,在文件夹内创建login.ts等文件，并在文件夹内放置以下内容（注：URL要和真实请求地址保持一致）
import { MockMethod } from "vite-plugin-mock";
export default [
{
url: "/mock-login", // 注意，这里只能是string格式
method: "post",
response: () => {
return {
menusList: [1,2,3,4,],
};
},
},
] as MockMethod[]
4、在vite.config.ts进行个人配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
import path from "path"
export default defineConfig({
plugins:[
vue(),
viteMockServe({
mockPath: "./src/mock/", // 指向mock下的文件
localEnabled: true // 是否开启开发环境
}
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
},
})
配置路径别名时需要在tsconfig.json文件下配置
{
"paths": {
"@/*": ["src/*"]
}
}
5、下载axios
npm i axios
6、封装请求，创建axios文件夹，文件夹下创建index.ts文件，文件内放置以下内容
import axios from 'axios'
// 创建一个 axios 实例
const service = axios.create({
baseURL: '', // 所有的请求地址前缀部分
timeout: 60000, // 请求超时时间毫秒
withCredentials: true, // 异步请求携带cookie
// headers: {
// 设置后端需要的传参类型
// 'Content-Type': 'application/json',
// 'token': 'your token',
// 'X-Requested-With': 'XMLHttpRequest',
// },
})
// 添加请求拦截器
service.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
return config
},
function (error) {
// 对请求错误做些什么
console.error('请求错误',error)
return Promise.reject(error)
}
)
// 添加响应拦截器
service.interceptors.response.use(
function (response) {
// 对响应数据做点什么
return response.data
},
function (error) {
return Promise.reject(error)
}
)
export default service
8、使用封装的请求：创建api文件夹，例：login.ts，文件夹下放置以下内容
// 导入axios实例
import httpRequest from '@/axios/index'
export function login() {
return httpRequest({
url: '/mock-login',
method: 'post',
})
}
export default {
login
}
9、页面内使用
import { login } from "@/api/login/index";
login().then((res) => {
console.log("login", res);
});
效果如下：
请求截图
打印如下：
打印截图
