Vue3 中使用 vite-plugin-fake-server 的介绍

Vue3 中使用 vite-plugin-fake-server 的介绍

1.安装在项目根目录下，运行以下命令安装该插件：

npm install vite-plugin-fake-server -D
npm install @faker-js/faker

在 vite.config.ts 文件中配置插件：

// vite.config.ts
import { defineConfig } from 'vite'
import { vitePluginFakeServer } from 'vite-plugin-fake-server'export default defineConfig({plugins: [vitePluginFakeServer({include: './mock', // 设置目标文件夹，将会引用该文件夹里包含 xxx.fake.{ts,js,mjs,cjs,cts,mts} 的文件enableProd: true // 是否在生产环境下设置 mock}),],
})

注意

• 如果在生产环境下设置了 mock，那么在开发环境下也会使用 mock 数据。
• mocK 的文件路径
  

2.创建一个 mock 文件夹，在该文件夹中创建一个 xxx.ts 文件，例如：mine.ts。

// mine.ts
import { defineFakeRoute } from "vite-plugin-fake-server/client";
import { faker } from "@faker-js/faker/locale/zh_CN";
export default defineFakeRoute([// 账户设置-个人信息{url: "/mine",method: "get",response: () => {return {success: true,data: {avatar: "https://avatars.githubusercontent.com/u/44761321",username: faker.internet.userName(),nickname: "sumu",email: "xx@163.com",phone: "xxx",description: "一个热爱开源的前端工程师"}};}},
]);

3.在组件中使用 mock 数据

import axios from 'axios';export const getCardList = () => {return axios.get('/mine');
};
const fetchCardList= async()=> {const response = await getCardList();console.log(response.data);}fetchCardList()

Fater官网地址: Faker