Vite 利用 vite-plugin-fake-server 开发环境 + 线上环境 mock 数据

[inkjuncom]

https://github.com/condorheroblog/vite-plugin-fake-server

只需关注如下文件目录结构

.
├── ...
├── package-lock.json
├── package.json
├── fake
│   └── index.fake.ts
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   └── main.tsx
└── vite.config.ts

安装

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

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { vitePluginFakeServer } from "vite-plugin-fake-server";

export default defineConfig({
  plugins: [
    react(),
    vitePluginFakeServer({
      enableProd: process.env.NODE_ENV === "production",
    }),
  ],
});

// fake/index.fake.ts
import { faker } from "@faker-js/faker";
import { defineFakeRoute } from "vite-plugin-fake-server/client";

export default defineFakeRoute([
  {
    url: "/api/user",
    response: () => {
      return {
        code: 0,
        msg: "success",
        data: {
          id: faker.string.uuid(),
          avatar: faker.image.avatar(),
          birthday: faker.date.birthdate(),
          email: faker.internet.email(),
          firstName: faker.person.firstName(),
          lastName: faker.person.lastName(),
          sex: faker.person.sexType(),
          role: "admin",
        },
      };
    },
  },
]);

// src/App.tsx
import { useEffect } from "react";
import "./App.css";

function App() {
  useEffect(() => {
    fetch("/api/store")
      .then((res) => res.json())
      .then((data) => console.log(data));
  }, []);

  return <h1>拼夕夕</h1>;
}

export default App;

这样 npm run dev 开发环境能请求到 mock, npm run build 之后, npm run preview 线上环境也能请求