feat(): formatGlobModules解析与封装

Author: wangguixing

README.md

@@ -13,4 +13,5 @@
 - vite-plugin-style-import （按需导入样式）
 - vite-plugin-compression  （开启GZIP压缩）
 - vite-plugin-cdn-import （cdn引入）
-- @vitejs/plugin-legacy  (传统浏览器支持)--->对vue3来说无意义，Proxy决定了vue3不支持ie11，但对react或其他可通过此实现支持
+- @vitejs/plugin-legacy  (传统浏览器支持)--->对vue3来说无意义，Proxy决定了vue3不支持ie11，但对react或其他可通过此实现支持
+- mockjs、vite-plugin-mock

build/plugin/mock.ts

@@ -0,0 +1,17 @@
+/*
+ * @Author: wangguixing [email protected]
+ * @Date: 2023-04-01 00:40:02
+ * @LastEditors: wangguixing [email protected]
+ * @LastEditTime: 2023-04-01 00:40:15
+ * @FilePath: \arcro-vue\build\plugin\mock.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { viteMockServe } from 'vite-plugin-mock';
+
+export default function ConfigViteMock() {
+  const config = viteMockServe({
+    mockPath: './src/mock/source',
+    localEnabled: true,
+  });
+  return config;
+}

build/vite.config.dev.ts

@@ -2,7 +2,7 @@
  * @Author: wangguixing [email protected]
  * @Date: 2023-03-06 16:54:08
  * @LastEditors: wangguixing [email protected]
- * @LastEditTime: 2023-04-01 00:00:44
+ * @LastEditTime: 2023-04-01 00:41:49
  * @FilePath: \myPages\build\vite.config.dev.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -11,6 +11,7 @@ import { mergeConfig, loadEnv } from 'vite';
 import eslint from 'vite-plugin-eslint';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import commonConfig from './vite.config.common';
+import ConfigViteMock from './plugin/mock';
 
 const getViteEnv = (mode: string, target: string) => {
   return loadEnv(mode, process.cwd())[target];
@@ -34,9 +35,9 @@ export default mergeConfig(
       proxy: {
         // 使用 proxy 实例
         '/api': {
-          target: process.env.VITE_APP_API_BASE_URL,
+          target: process.env.VITE_API_BASE_URL,
           changeOrigin: true,
-          rewrite: (path: string) => path.replace(/^\/api/, ''),
+          // rewrite: (path: string) => path.replace(/^\/api/, ''),
         },
       },
     },
@@ -56,6 +57,7 @@ export default mergeConfig(
           },
         },
       }),
+      ConfigViteMock(),
     ],
   },
   commonConfig

env.d.ts

@@ -2,13 +2,11 @@
  * @Author: guixing-wang [email protected]
  * @Date: 2023-03-05 16:08:45
  * @LastEditors: wangguixing [email protected]
- * @LastEditTime: 2023-03-31 10:56:00
+ * @LastEditTime: 2023-04-01 00:30:29
  * @FilePath: \myPages\env.d.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 /// <reference types="vite/client" />
-declare module 'crypto-js';
-declare module 'vite-plugin-imagemin';
 declare module '*.vue' {
   import type { DefineComponent } from 'vue';
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types

image.d.ts

@@ -0,0 +1,7 @@
+declare module '*.svg';
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.gif';
+declare module '*.bmp';
+declare module '*.tiff';

package.json

@@ -61,6 +61,7 @@
     "jsdom": "^21.1.0",
     "less": "^4.1.3",
     "lint-staged": "^13.1.2",
+    "mockjs": "^1.1.0",
     "npm-run-all": "^4.1.5",
     "nprogress": "^0.2.0",
     "prettier": "^2.8.4",
@@ -77,6 +78,7 @@
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-imagemin": "^0.6.1",
+    "vite-plugin-mock": "^2.9.6",
     "vite-plugin-style-import": "^2.0.0",
     "vite-svg-loader": "^4.0.0",
     "vitest": "^0.29.1",

src/mock/index.ts

@@ -0,0 +1,16 @@
+/*
+ * @Author: wangguixing [email protected]
+ * @Date: 2023-04-01 00:42:41
+ * @LastEditors: wangguixing [email protected]
+ * @LastEditTime: 2023-04-01 01:23:54
+ * @FilePath: \arcro-vue\src\mock\mock.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+
+import type { MockMethod } from 'vite-plugin-mock';
+import { formatGlobModules } from '@/utils/importMetaGlob';
+
+const services = import.meta.glob('./service/*.ts');
+const mockServices = formatGlobModules(services, [] as MockMethod[]);
+
+export default mockServices;

src/mock/service/login.ts

@@ -0,0 +1,62 @@
+/*
+ * @Author: wangguixing [email protected]
+ * @Date: 2023-04-01 00:45:08
+ * @LastEditors: wangguixing [email protected]
+ * @LastEditTime: 2023-04-01 01:13:03
+ * @FilePath: \arcro-vue\src\mock\login\index.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import type { mockService } from './types.d';
+
+export default {
+  url: '/api/getUserInfo', // 注意，这里只能是string格式
+  method: 'get',
+  response: () => ({
+    code: 1,
+    data: {
+      account: 'admin',
+      birthday: '0',
+      certificatesNumber: null,
+      certificatesType: null,
+      description: null,
+      education: null,
+      email: '[email protected]',
+      entryDate: '0',
+      firstLoginIp: '127.0.0.1',
+      firstLoginTime: '1635295040000',
+      gender: 1,
+      headIcon: null,
+      id: '1',
+      lastChangePasswordDate: '0',
+      lastLoginIp: '218.29.222.2',
+      lastLoginTime: '1680251906531',
+      loginAppFlag: 1,
+      managerUid: null,
+      mobilePhone: '13311112222',
+      nation: null,
+      nativePlace: null,
+      nickName: null,
+      postalAddress: null,
+      prevLoginIp: '218.29.222.2',
+      prevLoginTime: '1680250497020',
+      propertyJson: null,
+      quickQuery: null,
+      realName: '超级管理员',
+      signature: null,
+      sortNum: '35.00',
+      sourceType: 1,
+      sysFlag: 0,
+      sysTheme: null,
+      telephone: null,
+      tokenInfo: {
+        tokenName: 'token',
+        tokenValue: 'f788bd14187c4735a5331e44a2aa558a',
+      },
+      urgentContacts: null,
+      urgentTelephone: null,
+      workStatus: 2,
+    },
+    msg: '操作成功',
+    success: true,
+  }),
+} as mockService;

src/mock/service/types.d.ts

@@ -0,0 +1,18 @@
+/*
+ * @Author: wangguixing [email protected]
+ * @Date: 2023-04-01 01:00:22
+ * @LastEditors: wangguixing [email protected]
+ * @LastEditTime: 2023-04-01 01:04:11
+ * @FilePath: \arcro-vue\src\mock\service\types.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+export interface mockService {
+  url: string;
+  method: string;
+  response: () => {
+    code: number;
+    data: unknown;
+    msg: string;
+    success: boolean;
+  };
+}