fix: 修改mock方式

pnpm-lock.yaml

@@ -11,7 +11,7 @@ specifiers:
   '@vue/compiler-sfc': ^3.2.20
   '@vueuse/core': ^7.3.0
   animate.css: ^4.1.1
-  axios: ^0.23.0
+  axios: 0.23.0
   crypto-ts: ^1.0.2
   default-passive-events: ^2.0.0
   echarts: ^5.3.0
@@ -49,6 +49,7 @@ dependencies:
   axios: rg.cnpmjs.org/axios/0.23.0
   crypto-ts: r2.cnpmjs.org/crypto-ts/1.0.2
   highlight.js: registry.npmjs.org/highlight.js/11.5.0
+  mockjs: registry.npmjs.org/mockjs/1.1.0
   naive-ui: registry.npmjs.org/naive-ui/2.25.2_vue@3.2.24
   pinia: rg.cnpmjs.org/pinia/2.0.6_typescript@4.5.2+vue@3.2.24
   screenfull: rg.cnpmjs.org/screenfull/6.0.0
@@ -76,7 +77,6 @@ devDependencies:
   eslint-plugin-prettier: rg.cnpmjs.org/eslint-plugin-prettier/4.0.0_90bd2ba582f6d1348d73031482d782e2
   eslint-plugin-vue: rg.cnpmjs.org/eslint-plugin-vue/8.2.0_eslint@8.4.1
   lodash: rg.cnpmjs.org/lodash/4.17.21
-  mockjs: rg.cnpmjs.org/mockjs/1.1.0
   plop: r2.cnpmjs.org/plop/3.0.5
   prettier: rg.cnpmjs.org/prettier/2.5.1
   sass: rg.cnpmjs.org/sass/1.44.0
@@ -1870,6 +1870,13 @@ packages:
     name: color-name
     version: 1.1.4
 
+  registry.npmjs.org/commander/9.1.0:
+    resolution: {integrity: sha512-i0/MaqBtdbnJ4XQs4Pmyb+oFQl+q0lsAmokVUH92SlSw4fkeAcG3bVon+Qt7hmtF+u3Het6o4VgrcY3qAoEB6w==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/commander/-/commander-9.1.0.tgz}
+    name: commander
+    version: 9.1.0
+    engines: {node: ^12.20.0 || >=14}
+    dev: false
+
   registry.npmjs.org/css-render/0.15.8:
     resolution: {integrity: sha512-k1gp1MgYDPrFZhzheQkSwm6dmP6nPe2XE6WYpJBPwEc3GbMANPJZfxl7ofZlTl8/+tpMRiGTTgUkTlXaVbLxog==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/css-render/-/css-render-0.15.8.tgz}
     name: css-render
@@ -2185,6 +2192,15 @@ packages:
       graceful-fs: registry.npmjs.org/graceful-fs/4.2.8
     dev: true
 
+  registry.npmjs.org/mockjs/1.1.0:
+    resolution: {integrity: sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/mockjs/-/mockjs-1.1.0.tgz}
+    name: mockjs
+    version: 1.1.0
+    hasBin: true
+    dependencies:
+      commander: registry.npmjs.org/commander/9.1.0
+    dev: false
+
   registry.npmjs.org/ms/2.0.0:
     resolution: {integrity: sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/ms/-/ms-2.0.0.tgz}
     name: ms
@@ -3689,13 +3705,6 @@ packages:
       fsevents: registry.npmjs.org/fsevents/2.3.2
     dev: true
 
-  rg.cnpmjs.org/commander/8.3.0:
-    resolution: {integrity: sha1-SDfqGy2me5xhamevuw+v7lZ7ymY=, registry: http://r.cnpmjs.org/, tarball: https://rg.cnpmjs.org/commander/download/commander-8.3.0.tgz}
-    name: commander
-    version: 8.3.0
-    engines: {node: '>= 12'}
-    dev: true
-
   rg.cnpmjs.org/concat-map/0.0.1:
     resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=, registry: http://r.cnpmjs.org/, tarball: https://rg.cnpmjs.org/concat-map/download/concat-map-0.0.1.tgz}
     name: concat-map
@@ -5025,15 +5034,6 @@ packages:
     version: 1.2.5
     dev: true
 
-  rg.cnpmjs.org/mockjs/1.1.0:
-    resolution: {integrity: sha1-5qDDeOkZBtuv8gkRzAJzs8fXWwY=, registry: http://r.cnpmjs.org/, tarball: https://rg.cnpmjs.org/mockjs/download/mockjs-1.1.0.tgz}
-    name: mockjs
-    version: 1.1.0
-    hasBin: true
-    dependencies:
-      commander: rg.cnpmjs.org/commander/8.3.0
-    dev: true
-
   rg.cnpmjs.org/ms/2.1.2:
     resolution: {integrity: sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk=, registry: http://r.cnpmjs.org/, tarball: https://rg.cnpmjs.org/ms/download/ms-2.1.2.tgz}
     name: ms
@@ -5943,7 +5943,7 @@ packages:
       debug: rg.cnpmjs.org/debug/4.3.3
       esbuild: rg.cnpmjs.org/esbuild/0.11.3
       fast-glob: rg.cnpmjs.org/fast-glob/3.2.7
-      mockjs: rg.cnpmjs.org/mockjs/1.1.0
+      mockjs: registry.npmjs.org/mockjs/1.1.0
       path-to-regexp: rg.cnpmjs.org/path-to-regexp/6.2.0
       vite: rg.cnpmjs.org/vite/2.7.1_sass@1.44.0
     transitivePeerDependencies:

src/api/mock/index.ts

@@ -1,13 +1,16 @@
-import Mock from 'mockjs'
 import test from './test.mock'
-Mock.setup({
+import { MockMethod } from 'vite-plugin-mock'
-  timeout: '300-600'
+import { RequestHttpEnum } from '@/enums/httpEnum'
-})
 
 // 单个X数据
-const featchMockData = '/api/mockData'
+export const mockDataUrl = '/mock/mockData'
-Mock.mock(/\/api\/mockData(|\?\S*)$/, 'get', test.featchMockData)
 
-export {
+const mockObject: MockMethod[] =[{
-  featchMockData
+  // 正则
-}
+  // url: /\/mock\/mockData(|\?\S*)$/,
+  url: '/mock/mockData',
+  method: RequestHttpEnum.GET,
+  response: () => test.featchMockData
+}]
+
+export default mockObject

src/hooks/useChartDataFetch.hook.ts

@@ -9,7 +9,7 @@ import { RequestDataTypeEnum } from '@/enums/httpEnum'
  * @param chartConfig
  */
 export const useChartDataFetch = (chartConfig: CreateComponentType) => {
-  let fetchInterval = 0
+  let fetchInterval:any = 0
 
   watchEffect(() => {
     clearInterval(fetchInterval)

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue

@@ -21,7 +21,7 @@
           <span>
             开发环境使用 mock 数据，请输入【
             <n-text type="info">
-              {{featchMockData}}
+              {{mockDataUrl}}
             </n-text>
             】
           </span>
@@ -58,7 +58,7 @@ import { ref, toRefs } from 'vue'
 import { icon } from '@/plugins'
 import { SettingItemBox } from '@/components/ChartItemSetting/index'
 import { RequestHttpEnum } from '@/enums/httpEnum'
-import { featchMockData } from '@/api/mock'
+import { mockDataUrl } from '@/api/mock'
 import { http } from '@/api/http'
 import { SelectHttpType } from '../../index.d'
 import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'

vite.config.ts

@@ -3,6 +3,7 @@ import vue from '@vitejs/plugin-vue'
 import { resolve } from 'path'
 import { OUTPUT_DIR, brotliSize, chunkSizeWarningLimit, terserOptions, rollupOptions } from './build/constant'
 import viteCompression from 'vite-plugin-compression'
+import { viteMockServe} from "vite-plugin-mock";
 
 function pathResolve(dir: string) {
   return resolve(process.cwd(), '.', dir)
@@ -10,6 +11,7 @@ function pathResolve(dir: string) {
 
 export default defineConfig({
   base: './',
+  // 路径重定向
   resolve: {
     alias: [
       {
@@ -23,6 +25,7 @@ export default defineConfig({
     ],
     dedupe: ['vue']
   },
+  // 全局 css 注册
   css: {
     preprocessorOptions: {
       scss: {
@@ -33,6 +36,18 @@ export default defineConfig({
   },
   plugins: [
     vue(),
+    viteMockServe({
+			mockPath: "/src/api/mock",
+      // 开发打包开关
+			localEnabled: true,
+      // 生产打包开关
+      prodEnabled: true,
+      // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件
+      supportTs: true,
+      // 监视文件更改
+      watchFiles: true,
+		}),
+    // 压缩
     viteCompression({
       verbose: true,
       disable: false,