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