refactor: 使用`vite-plugin-fake-server`替换`vite-plugin-mock`，使用`@faker-js/faker`替换`mockjs` (#763)

build/cdn.ts

@@ -3,7 +3,6 @@ import { Plugin as importToCDN } from "vite-plugin-cdn-import";
 /**
  * @description 打包时采用`cdn`模式，仅限外网使用（默认不采用，如果需要采用cdn模式，请在 .env.production 文件，将 VITE_CDN 设置成true）
  * 平台采用国内cdn：https://www.bootcdn.cn，当然你也可以选择 https://unpkg.com 或者 https://www.jsdelivr.com
- * 提醒：mockjs不能用cdn模式引入，会报错。正确的方式是，生产环境删除mockjs，使用真实的后端请求
  * 注意：上面提到的仅限外网使用也不是完全肯定的，如果你们公司内网部署的有相关js、css文件，也可以将下面配置对应改一下，整一套内网版cdn
  */
 export const cdn = importToCDN({

build/plugins.ts

@@ -4,20 +4,19 @@ import vue from "@vitejs/plugin-vue";
 import { viteBuildInfo } from "./info";
 import svgLoader from "vite-svg-loader";
 import vueJsx from "@vitejs/plugin-vue-jsx";
-import { viteMockServe } from "vite-plugin-mock";
 import { configCompressPlugin } from "./compress";
 import { visualizer } from "rollup-plugin-visualizer";
 import removeConsole from "vite-plugin-remove-console";
 import { themePreprocessorPlugin } from "@pureadmin/theme";
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
 import { genScssMultipleScopeVars } from "../src/layout/theme";
+import { vitePluginFakeServer } from "vite-plugin-fake-server";
 
 export function getPluginsList(
   command: string,
   VITE_CDN: boolean,
   VITE_COMPRESSION: ViteCompression
 ) {
-  const prodMock = true;
   const lifecycle = process.env.npm_lifecycle_event;
   return [
     vue(),
@@ -43,15 +42,11 @@ export function getPluginsList(
     // svg组件化支持
     svgLoader(),
     // mock支持
-    viteMockServe({
-      mockPath: "mock",
-      localEnabled: command === "serve",
-      prodEnabled: command !== "serve" && prodMock,
-      injectCode: `
-          import { setupProdMockServer } from './mockProdServer';
-          setupProdMockServer();
-        `,
-      logger: false
+    vitePluginFakeServer({
+      logger: false,
+      include: "mock",
+      infixName: false,
+      enableProd: true
     }),
     // 打包分析
     lifecycle === "report"

mock/asyncRoutes.ts

@@ -1,5 +1,5 @@
 // 模拟后端动态生成路由
-import { MockMethod } from "vite-plugin-mock";
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
 import { system, permission, frame, tabs } from "@/router/enums";
 
 /**
@@ -198,7 +198,7 @@ const tabsRouter = {
   ]
 };
 
-export default [
+export default defineFakeRoute([
   {
     url: "/get-async-routes",
     method: "get",
@@ -209,4 +209,4 @@ export default [
       };
     }
   }
-] as MockMethod[];
+]);

mock/list.ts

@@ -1,6 +1,6 @@
-import { MockMethod } from "vite-plugin-mock";
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
 
-export default [
+export default defineFakeRoute([
   {
     url: "/get-card-list",
     method: "post",
@@ -676,4 +676,4 @@ export default [
       };
     }
   }
-] as MockMethod[];
+]);

mock/login.ts

@@ -1,7 +1,7 @@
 // 根据角色动态生成路由
-import { MockMethod } from "vite-plugin-mock";
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
 
-export default [
+export default defineFakeRoute([
   {
     url: "/login",
     method: "post",
@@ -33,4 +33,4 @@ export default [
       }
     }
   }
-] as MockMethod[];
+]);

mock/map.ts

@@ -1,29 +1,33 @@
-import { MockMethod } from "vite-plugin-mock";
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
+import { faker } from "@faker-js/faker/locale/zh_CN";
 
 type mapType = {
   plateNumber: string;
   driver: string;
-  "orientation|1-360": number;
-  "lng|113-114.1-10": number;
-  "lat|34-35.1-10": number;
+  orientation: number;
+  lng: number;
+  lat: number;
 };
 
-// http://mockjs.com/examples.html#Object
 const mapList = (): Array<mapType> => {
   const result: Array<mapType> = [];
   for (let index = 0; index < 200; index++) {
     result.push({
-      plateNumber: "豫A@natural(11111, 99999)@character('upper')",
-      driver: "@cname()",
-      "orientation|1-360": 100,
-      "lng|113-114.1-10": 1,
-      "lat|34-35.1-10": 1
+      plateNumber: `豫A${faker.string.numeric({
+        length: 5
+      })}${faker.string.alphanumeric({
+        casing: "upper"
+      })}`,
+      driver: faker.person.firstName(),
+      orientation: faker.number.int({ min: 1, max: 360 }),
+      lng: faker.location.latitude({ max: 114.1, min: 113 }),
+      lat: faker.location.latitude({ max: 35.1, min: 34 })
     });
   }
   return result;
 };
 
-export default [
+export default defineFakeRoute([
   {
     url: "/get-map-info",
     method: "get",
@@ -34,4 +38,4 @@ export default [
       };
     }
   }
-] as MockMethod[];
+]);

mock/refreshToken.ts

@@ -1,7 +1,7 @@
-import { MockMethod } from "vite-plugin-mock";
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
 
 // 模拟刷新token接口
-export default [
+export default defineFakeRoute([
   {
     url: "/refresh-token",
     method: "post",
@@ -24,4 +24,4 @@ export default [
       }
     }
   }
-] as MockMethod[];
+]);

mock/system.ts

@@ -1,6 +1,7 @@
-import { MockMethod } from "vite-plugin-mock";
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
+import { faker } from "@faker-js/faker/locale/zh_CN";
 
-export default [
+export default defineFakeRoute([
   // 用户管理
   {
     url: "/user",
@@ -12,7 +13,7 @@ export default [
           nickname: "admin",
           avatar: "https://avatars.githubusercontent.com/u/44761321",
           phone: "15888886789",
-          email: "@email",
+          email: faker.internet.email(),
           sex: 0,
           id: 1,
           status: 1,
@@ -30,7 +31,7 @@ export default [
           nickname: "common",
           avatar: "https://avatars.githubusercontent.com/u/52823142",
           phone: "18288882345",
-          email: "@email",
+          email: faker.internet.email(),
           sex: 1,
           id: 2,
           status: 1,
@@ -153,12 +154,12 @@ export default [
             id: 100,
             sort: 0,
             phone: "15888888888",
-            principal: "@cname()",
-            email: "@email",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
             status: 1, // 状态 1 启用 0 停用
             type: 1, // 1 公司 2 分公司 3 部门
             createTime: 1605456000000,
-            remark: "@cparagraph(1, 3)"
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
           },
           {
             name: "郑州分公司",
@@ -166,12 +167,12 @@ export default [
             id: 101,
             sort: 1,
             phone: "15888888888",
-            principal: "@cname()",
-            email: "@email",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
             status: 1,
             type: 2,
             createTime: 1605456000000,
-            remark: "@cparagraph(1, 3)"
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
           },
           {
             name: "研发部门",
@@ -179,12 +180,12 @@ export default [
             id: 103,
             sort: 1,
             phone: "15888888888",
-            principal: "@cname()",
-            email: "@email",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
             status: 1,
             type: 3,
             createTime: 1605456000000,
-            remark: "@cparagraph(1, 3)"
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
           },
           {
             name: "市场部门",
@@ -192,12 +193,12 @@ export default [
             id: 108,
             sort: 1,
             phone: "15888888888",
-            principal: "@cname()",
-            email: "@email",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
             status: 1,
             type: 3,
             createTime: 1605456000000,
-            remark: "@cparagraph(1, 3)"
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
           },
           {
             name: "深圳分公司",
@@ -205,12 +206,12 @@ export default [
             id: 102,
             sort: 2,
             phone: "15888888888",
-            principal: "@cname()",
-            email: "@email",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
             status: 1,
             type: 2,
             createTime: 1605456000000,
-            remark: "@cparagraph(1, 3)"
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
           },
           {
             name: "市场部门",
@@ -218,12 +219,12 @@ export default [
             id: 104,
             sort: 2,
             phone: "15888888888",
-            principal: "@cname()",
-            email: "@email",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
             status: 1,
             type: 3,
             createTime: 1605456000000,
-            remark: "@cparagraph(1, 3)"
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
           },
           {
             name: "财务部门",
@@ -231,12 +232,12 @@ export default [
             id: 109,
             sort: 2,
             phone: "15888888888",
-            principal: "@cname()",
-            email: "@email",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
             status: 1,
             type: 3,
             createTime: 1605456000000,
-            remark: "@cparagraph(1, 3)"
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
           },
           {
             name: "测试部门",
@@ -244,12 +245,12 @@ export default [
             id: 105,
             sort: 3,
             phone: "15888888888",
-            principal: "@cname()",
-            email: "@email",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
             status: 0,
             type: 3,
             createTime: 1605456000000,
-            remark: "@cparagraph(1, 3)"
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
           },
           {
             name: "财务部门",
@@ -257,12 +258,12 @@ export default [
             id: 106,
             sort: 4,
             phone: "15888888888",
-            principal: "@cname()",
-            email: "@email",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
             status: 1,
             type: 3,
             createTime: 1605456000000,
-            remark: "@cparagraph(1, 3)"
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
           },
           {
             name: "运维部门",
@@ -270,15 +271,15 @@ export default [
             id: 107,
             sort: 5,
             phone: "15888888888",
-            principal: "@cname()",
-            email: "@email",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
             status: 0,
             type: 3,
             createTime: 1605456000000,
-            remark: "@cparagraph(1, 3)"
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
           }
         ]
       };
     }
   }
-] as MockMethod[];
+]);

package.json

@@ -73,7 +73,6 @@
     "md-editor-v3": "2.7.2",
     "mint-filter": "^4.0.3",
     "mitt": "^3.0.1",
-    "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
     "pinia": "^2.1.7",
@@ -105,6 +104,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.7.2",
     "@commitlint/config-conventional": "^17.7.0",
+    "@faker-js/faker": "^8.2.0",
     "@iconify-icons/ep": "^1.2.12",
     "@iconify-icons/ri": "^1.2.10",
     "@iconify/vue": "^4.1.1",
@@ -112,7 +112,6 @@
     "@pureadmin/theme": "^3.2.0",
     "@types/intro.js": "^5.1.2",
     "@types/js-cookie": "^3.0.4",
-    "@types/mockjs": "^1.0.8",
     "@types/node": "^20.8.2",
     "@types/nprogress": "0.2.0",
     "@types/qrcode": "^1.5.2",
@@ -160,7 +159,7 @@
     "vite": "^4.5.0",
     "vite-plugin-cdn-import": "^0.3.5",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-mock": "2.9.6",
+    "vite-plugin-fake-server": "^2.0.0",
     "vite-plugin-remove-console": "^2.1.1",
     "vite-svg-loader": "^4.0.0",
     "vue-eslint-parser": "^9.3.2",

src/mockProdServer.ts

@@ -1,14 +0,0 @@
-import { createProdMockServer } from "vite-plugin-mock/es/createProdMockServer";
-
-const modules: Record<string, any> = import.meta.glob("../mock/*.ts", {
-  eager: true
-});
-const mockModules = [];
-
-Object.keys(modules).forEach(key => {
-  mockModules.push(...modules[key].default);
-});
-
-export function setupProdMockServer() {
-  createProdMockServer(mockModules);
-}

tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "Node",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
     "strict": false,
     "jsx": "preserve",
     "importHelpers": true,
@@ -17,10 +17,17 @@
     "baseUrl": ".",
     "allowJs": false,
     "resolveJsonModule": true,
-    "lib": ["dom", "esnext"],
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
     "paths": {
-      "@/*": ["src/*"],
-      "@build/*": ["build/*"]
+      "@/*": [
+        "src/*"
+      ],
+      "@build/*": [
+        "build/*"
+      ]
     },
     "types": [
       "node",
@@ -38,5 +45,9 @@
     "types/*.d.ts",
     "vite.config.ts"
   ],
-  "exclude": ["dist", "**/*.js", "node_modules"]
-}
+  "exclude": [
+    "dist",
+    "**/*.js",
+    "node_modules"
+  ]
+}