fix: 修复mock无法使用问题

mock/_createProductionServer.ts

@@ -0,0 +1,18 @@
+import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
+
+const modules = import.meta.glob('./**/*.mock.ts', {
+  import: 'default',
+  eager: true
+})
+
+const mockModules: any[] = []
+Object.keys(modules).forEach(async (key) => {
+  if (key.includes('_')) {
+    return
+  }
+  mockModules.push(...(modules[key] as any))
+})
+
+export function setupProdMockServer() {
+  createProdMockServer(mockModules)
+}

mock/analysis/index.mock.ts

@@ -1,15 +1,15 @@
-import { defineMock } from 'vite-plugin-mock-dev-server'
 import { SUCCESS_CODE } from '@/constants'
+import { MockMethod } from 'vite-plugin-mock'
 
-const delay = 1000
+const timeout = 1000
 
-export default defineMock([
+export default [
   // 分析页统计接口
   {
     url: '/mock/analysis/total',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: {
@@ -24,9 +24,9 @@ export default defineMock([
   // 用户来源
   {
     url: '/mock/analysis/userAccessSource',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: [
@@ -42,9 +42,9 @@ export default defineMock([
   // 每周用户活跃量
   {
     url: '/mock/analysis/weeklyUserActivity',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: [
@@ -62,9 +62,9 @@ export default defineMock([
   // 每月销售额
   {
     url: '/mock/analysis/monthlySales',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: [
@@ -84,4 +84,4 @@ export default defineMock([
       }
     }
   }
-])
+] as MockMethod[]

mock/department/index.mock.ts

@@ -78,8 +78,8 @@ export default [
   // 列表接口
   {
     url: '/mock/department/list',
-    method: 'GET',
-    body: () => {
+    method: 'get',
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: {
@@ -90,8 +90,8 @@ export default [
   },
   {
     url: '/mock/department/table/list',
-    method: 'GET',
-    body: () => {
+    method: 'get',
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: {
@@ -103,9 +103,9 @@ export default [
   },
   {
     url: '/mock/department/users',
-    method: 'GET',
-    delay: 1000,
-    body: ({ query }) => {
+    method: 'get',
+    timeout: 1000,
+    response: ({ query }) => {
       const { pageSize } = query
       // 根据pageSize来创建数据
       const mockList: any = []
@@ -135,9 +135,9 @@ export default [
   // 保存接口
   {
     url: '/mock/department/user/save',
-    method: 'POST',
-    delay: 1000,
-    body: () => {
+    method: 'post',
+    timeout: 1000,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: 'success'
@@ -147,8 +147,8 @@ export default [
   // 删除接口
   {
     url: '/mock/department/user/delete',
-    method: 'POST',
-    body: ({ body }) => {
+    method: 'post',
+    response: ({ body }) => {
       const ids = body.ids
       if (!ids) {
         return {
@@ -166,9 +166,9 @@ export default [
   // 保存接口
   {
     url: '/mock/department/save',
-    method: 'POST',
-    delay: 1000,
-    body: () => {
+    method: 'post',
+    timeout: 1000,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: 'success'
@@ -178,8 +178,8 @@ export default [
   // 删除接口
   {
     url: '/mock/department/delete',
-    method: 'POST',
-    body: ({ body }) => {
+    method: 'post',
+    response: ({ body }) => {
       const ids = body.ids
       if (!ids) {
         return {

mock/dict/index.mock.ts

@@ -1,6 +1,6 @@
 import { SUCCESS_CODE } from '@/constants'
 
-const delay = 1000
+const timeout = 1000
 
 const dictObj: Recordable = {
   importance: [
@@ -23,9 +23,9 @@ export default [
   // 字典接口
   {
     url: '/mock/dict/list',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: dictObj
@@ -35,9 +35,9 @@ export default [
   // 获取某个字典
   {
     url: '/mock/dict/one',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: [

mock/menu/index.mock.ts

@@ -1,15 +1,15 @@
 import { faker } from '@faker-js/faker'
 import { SUCCESS_CODE } from '@/constants'
 
-const delay = 1000
+const timeout = 1000
 
 export default [
   // 列表接口
   {
     url: '/mock/menu/list',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: {

mock/request/index.mock.ts

@@ -1,13 +1,13 @@
 import { SUCCESS_CODE } from '@/constants'
 
-const delay = 600000
+const timeout = 600000
 
 export default [
   {
     url: '/mock/request/1',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: 'request-1'
@@ -16,9 +16,9 @@ export default [
   },
   {
     url: '/mock/request/2',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: 'request-2'
@@ -27,9 +27,9 @@ export default [
   },
   {
     url: '/mock/request/3',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: 'request-3'
@@ -38,9 +38,9 @@ export default [
   },
   {
     url: '/mock/request/4',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: 'request-4'
@@ -49,9 +49,9 @@ export default [
   },
   {
     url: '/mock/request/5',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: 'request-5'
@@ -60,9 +60,9 @@ export default [
   },
   {
     url: '/mock/request/expired',
-    method: 'GET',
-    delay: 0,
-    body: () => {
+    method: 'get',
+    timeout: 0,
+    response: () => {
       return {
         code: 401,
         message: 'token expired'

mock/role/index.mock.ts

@@ -2,7 +2,7 @@ import { faker } from '@faker-js/faker'
 import { SUCCESS_CODE } from '@/constants'
 import { toAnyString } from '@/utils'
 
-const delay = 1000
+const timeout = 1000
 
 const adminList = [
   {
@@ -1146,9 +1146,9 @@ export default [
   // 列表接口
   {
     url: '/mock/role/list',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: adminList
@@ -1157,9 +1157,9 @@ export default [
   },
   {
     url: '/mock/role/table',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: {
@@ -1172,9 +1172,9 @@ export default [
   // 列表接口
   {
     url: '/mock/role/list2',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: testList
@@ -1183,9 +1183,9 @@ export default [
   },
   {
     url: '/mock/role/table',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: {

mock/table/index.mock.ts

@@ -2,7 +2,7 @@ import { faker } from '@faker-js/faker'
 import { SUCCESS_CODE } from '@/constants'
 import { toAnyString } from '@/utils'
 
-const delay = 1000
+const timeout = 1000
 const count = 100
 
 const baseContent =
@@ -213,9 +213,9 @@ export default [
   // 树形列表接口
   {
     url: '/mock/example/treeList',
-    method: 'GET',
-    delay,
-    body: ({ query }) => {
+    method: 'get',
+    timeout,
+    response: ({ query }) => {
       const { title, pageIndex, pageSize } = query
       const mockList = treeList.filter((item) => {
         if (title && item.title.indexOf(title) < 0) return false
@@ -236,9 +236,9 @@ export default [
   // 列表接口
   {
     url: '/mock/example/list',
-    method: 'GET',
-    delay,
-    body: ({ query }) => {
+    method: 'get',
+    timeout,
+    response: ({ query }) => {
       const { title, pageIndex, pageSize } = query
       const mockList = List.filter((item) => {
         if (title && item.title.indexOf(title) < 0) return false
@@ -259,9 +259,9 @@ export default [
   // 保存接口
   {
     url: '/mock/example/save',
-    method: 'POST',
-    delay,
-    body: ({ body }) => {
+    method: 'post',
+    timeout,
+    response: ({ body }) => {
       if (!body.id) {
         List = [
           Object.assign(body, {
@@ -290,8 +290,8 @@ export default [
   // 详情接口
   {
     url: '/mock/example/detail',
-    method: 'GET',
-    body: ({ query }) => {
+    method: 'get',
+    response: ({ query }) => {
       const { id } = query
       for (const example of List) {
         if (example.id === id) {
@@ -306,8 +306,8 @@ export default [
   // 删除接口
   {
     url: '/mock/example/delete',
-    method: 'POST',
-    body: ({ body }) => {
+    method: 'post',
+    response: ({ body }) => {
       const ids = body.ids
       if (!ids) {
         return {
@@ -330,9 +330,9 @@ export default [
   },
   {
     url: '/mock/card/list',
-    method: 'GET',
-    delay,
-    body: ({ query }) => {
+    method: 'get',
+    timeout,
+    response: ({ query }) => {
       const { name, pageIndex, pageSize } = query
       const mockList = cardList.filter((item) => {
         if (name && item.name.indexOf(name) < 0) return false

mock/user/index.mock.ts

@@ -1,6 +1,6 @@
 import { SUCCESS_CODE } from '@/constants'
 
-const delay = 1000
+const timeout = 1000
 
 const List: {
   username: string
@@ -29,8 +29,8 @@ export default [
   // 列表接口
   {
     url: '/mock/user/list',
-    method: 'GET',
-    body: ({ query }) => {
+    method: 'get',
+    response: ({ query }) => {
       const { username, pageIndex, pageSize } = query
 
       const mockList = List.filter((item) => {
@@ -53,9 +53,9 @@ export default [
   // 登录接口
   {
     url: '/mock/user/login',
-    method: 'POST',
-    delay,
-    body: ({ body }) => {
+    method: 'post',
+    timeout,
+    response: ({ body }) => {
       const data = body
       let hasUser = false
       for (const user of List) {
@@ -78,9 +78,9 @@ export default [
   // 退出接口
   {
     url: '/mock/user/loginOut',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: null

mock/workplace/index.mock.ts

@@ -1,14 +1,14 @@
 import { SUCCESS_CODE } from '@/constants'
 
-const delay = 1000
+const timeout = 1000
 
 export default [
   // 获取统计
   {
     url: '/mock/workplace/total',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: {
@@ -22,9 +22,9 @@ export default [
   // 获取项目
   {
     url: '/mock/workplace/project',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: [
@@ -77,9 +77,9 @@ export default [
   // 获取动态
   {
     url: '/mock/workplace/dynamic',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: [
@@ -114,9 +114,9 @@ export default [
   // 获取团队信息
   {
     url: '/mock/workplace/team',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: [
@@ -151,9 +151,9 @@ export default [
   // 获取指数
   {
     url: '/mock/workplace/radar',
-    method: 'GET',
-    delay,
-    body: () => {
+    method: 'get',
+    timeout,
+    response: () => {
       return {
         code: SUCCESS_CODE,
         data: [

package.json

@@ -27,6 +27,7 @@
     "icon": "esno ./scripts/icon.ts"
   },
   "dependencies": {
+    "@faker-js/faker": "^8.3.1",
     "@iconify/iconify": "^3.1.1",
     "@iconify/vue": "^4.1.1",
     "@vueuse/core": "^10.7.0",
@@ -59,7 +60,6 @@
   "devDependencies": {
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
-    "@faker-js/faker": "^8.3.1",
     "@iconify/json": "^2.2.153",
     "@intlify/unplugin-vue-i18n": "^1.5.0",
     "@purge-icons/generated": "^0.10.0",
@@ -109,7 +109,7 @@
     "vite": "5.0.6",
     "vite-plugin-ejs": "^1.7.0",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-mock-dev-server": "^1.4.0",
+    "vite-plugin-mock": "^2.9.6",
     "vite-plugin-progress": "^0.0.7",
     "vite-plugin-purge-icons": "^0.10.0",
     "vite-plugin-style-import": "2.0.0",

vite.config.ts

@@ -6,13 +6,12 @@ import VueJsx from '@vitejs/plugin-vue-jsx'
 import progress from 'vite-plugin-progress'
 import EslintPlugin from 'vite-plugin-eslint'
 import { ViteEjsPlugin } from "vite-plugin-ejs"
-// import { viteMockServe } from 'vite-plugin-mock'
+import { viteMockServe } from 'vite-plugin-mock'
 import PurgeIcons from 'vite-plugin-purge-icons'
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite"
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
 import UnoCSS from 'unocss/vite'
-import MockDevServerPlugin from 'vite-plugin-mock-dev-server'
 
 // https://vitejs.dev/config/
 const root = process.cwd()
@@ -68,19 +67,16 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         svgoOptions: true
       }),
       PurgeIcons(),
-      // viteMockServe({
-      //   ignore: /^\_/,
-      //   mockPath: 'mock',
-      //   localEnabled: !isBuild,
-      //   prodEnabled: isBuild,
-      //   injectCode: `
-      //     import { setupProdMockServer } from '../mock/_createProductionServer'
+      viteMockServe({
+        ignore: /^\_/,
+        mockPath: 'mock',
+        localEnabled: !isBuild,
+        prodEnabled: isBuild,
+        injectCode: `
+          import { setupProdMockServer } from '../mock/_createProductionServer'
 
-      //     setupProdMockServer()
-      //     `
-      // }),
-      MockDevServerPlugin({
-        prefix: '/mock'
+          setupProdMockServer()
+          `
       }),
       ViteEjsPlugin({
         title: env.VITE_APP_TITLE