chore(projects): 增加了mock数据功能

build/plugins/html.ts

@@ -1,6 +1,6 @@
 import { createHtmlPlugin } from 'vite-plugin-html'; // https://github.com/vbenjs/vite-plugin-html/blob/main/README.zh_CN.md
 
-export default (env) => {
+export default (env: ImportMetaEnv) => {
   return createHtmlPlugin({
     minify: true, // 压缩HTML
     inject: {

build/plugins/index.ts

@@ -2,8 +2,9 @@ import vue from './vue';
 import compress from './compress';
 import html from './html';
 import unocss from './unocss';
-import visualizer from './visualizer';
+import visualizer from '../../visualizer';
 import unplugin from './unplugin';
+import mock from './mock';
 
 /**
  * @description: 设置vite插件配置
@@ -11,7 +12,7 @@ import unplugin from './unplugin';
  * @return {*}
  */
 export function setVitePlugins(env: ImportMetaEnv) {
-  const plugins = [...vue, html(env), unocss, ...unplugin];
+  const plugins = [...vue, html(env), unocss, ...unplugin, mock];
   // 是否压缩
   if (env.VITE_COMPRESS_OPEN === 'Y') {
     plugins.push(compress(env));

build/plugins/mock.ts

@@ -0,0 +1,7 @@
+import { viteMockServe } from 'vite-plugin-mock';
+
+export default viteMockServe({
+  mockPath: 'mock',
+  watchFiles: true, // 监视文件更改
+  // localEnabled: command === 'serve',
+});

mock/index.ts

@@ -0,0 +1,6 @@
+import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
+import api from './module';
+
+export function setupMockServer() {
+  createProdMockServer(api);
+}

mock/module/index.ts

@@ -0,0 +1,3 @@
+import user from './user';
+
+export default [...user];

mock/module/user.ts

@@ -0,0 +1,65 @@
+import Mock from 'mockjs';
+function resultSuccess(data: any, { msg = 'success' } = {}) {
+  return Mock.mock({
+    code: 200,
+    data,
+    msg,
+  });
+}
+
+const Random = Mock.Random;
+
+const token = Random.string('upper', 32, 32);
+
+const adminInfo = {
+  userId: '1',
+  username: 'admin',
+  realName: 'Admin',
+  avatar: Random.image(),
+  desc: 'manager',
+  password: Random.string('upper', 4, 16),
+  token,
+  permissions: [
+    {
+      label: '主控台',
+      value: 'dashboard_console',
+    },
+    {
+      label: '监控页',
+      value: 'dashboard_monitor',
+    },
+    {
+      label: '工作台',
+      value: 'dashboard_workplace',
+    },
+    {
+      label: '基础列表',
+      value: 'basic_list',
+    },
+    {
+      label: '基础列表删除',
+      value: 'basic_list_delete',
+    },
+  ],
+};
+
+export default [
+  {
+    url: '/mock/login',
+    timeout: 1000,
+    method: 'post',
+    response: () => {
+      return resultSuccess({ token });
+    },
+  },
+  {
+    url: '/mock/admin_info',
+    timeout: 1000,
+    method: 'get',
+    response: () => {
+      // const token = getRequestToken(request);
+      // if (!token) return resultError('Invalid token');
+      return resultSuccess(adminInfo);
+    },
+  },
+];

package.json

@@ -49,6 +49,7 @@
     "eslint-plugin-vue": "^9.3.0",
     "husky": "^8.0.0",
     "lint-staged": "^13.0.3",
+    "mockjs": "^1.1.0",
     "naive-ui": "^2.32.1",
     "prettier": "^2.7.1",
     "rollup-plugin-visualizer": "^5.7.1",
@@ -58,6 +59,7 @@
     "vite": "^3.0.0",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^3.2.0",
+    "vite-plugin-mock": "^2.9.6",
     "vue-tsc": "^0.38.4"
   }
 }

src/service/api/login.ts

@@ -1,4 +1,5 @@
 import { request } from '../http';
+import { mockRequest } from '../http';
 
 interface Itest {
   data: string;
@@ -23,3 +24,7 @@ export function fetachPut(params: Itest) {
 export function fetachPatch(params: Itest) {
   return request.patch('/patchAPI', params);
 }
+/* mock方法测试 */
+export function fetchMock() {
+  return mockRequest.post('/login');
+}

src/service/http/index.ts

@@ -1,10 +1,11 @@
 import { getServiceEnvConfig } from '~/.env-config';
 import { createRequest } from './request';
 
-const { url, urlPattern, secondUrl, secondUrlPattern } = getServiceEnvConfig(import.meta.env);
+const { url, urlPattern } = getServiceEnvConfig(import.meta.env);
 
 const isHttpProxy = import.meta.env.VITE_HTTP_PROXY === 'Y';
 
 export const request = createRequest({ baseURL: isHttpProxy ? urlPattern : url });
 
 // export const secondRequest = createRequest({ baseURL: isHttpProxy ? secondUrlPattern : secondUrl });
+export const mockRequest = createRequest({ baseURL: '/mock' });

src/views/test/test1.vue

@@ -7,11 +7,12 @@
     <div hover:c-blue @click="delete2">click to delete</div>
     <div hover:c-blue @click="put">click to put</div>
     <div hover:c-blue @click="patch">click to patch</div>
+    <div hover:c-blue @click="mock">click to use mock</div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { fetachGet, fetachPost, fetachDelete, fetachPut, fetachPatch } from '@/service/api';
+import { fetachGet, fetachPost, fetachDelete, fetachPut, fetachPatch, fetchMock } from '@/service/api';
 
 const pinter = () => {
   console.log('打印环境配置', import.meta.env);
@@ -50,6 +51,11 @@ const patch = () => {
     console.log(res);
   });
 };
+const mock = () => {
+  fetchMock().then((res) => {
+    console.log(res);
+  });
+};
 </script>
 
 <style scoped></style>

tsconfig.json

@@ -1,46 +1,26 @@
-// {
-//   "compilerOptions": {
-//     "baseUrl": ".",
-//     "target": "ESNext",
-//     "useDefineForClassFields": true,
-//     "module": "ESNext",
-//     "moduleResolution": "Node",
-//     "strict": true,
-//     "jsx": "preserve",
-//     "sourceMap": true,
-//     "resolveJsonModule": true,
-//     "isolatedModules": true,
-//     "esModuleInterop": true,
-//     "lib": ["ESNext", "DOM"],
-//     "skipLibCheck": true,
-//     "paths": {
-//       "~/*": ["./*"],
-//       "@/*": ["./src/*"]
-//     },
-//     "types": ["node", "vite/client", "naive-ui/volar"]
-//   }
-//   // "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
-// }
 {
   "compilerOptions": {
     "baseUrl": ".",
-    "module": "ESNext",
+    "incremental": true, // 只编译修改过的文件,这个时候会生成tsconfig.tsbuildinfo,下次编译的时候会进行对比只编译修改过的文件
     "target": "ESNext",
-    "lib": ["DOM", "ESNext"],
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "strict": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
     "jsx": "preserve",
-    "moduleResolution": "node",
+    // "sourceMap": true,
+    "removeComments": false, //编译删除注释
     "resolveJsonModule": true,
-    "noUnusedLocals": true,
+    "isolatedModules": true,
-    "strictNullChecks": true,
+    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
     "paths": {
       "~/*": ["./*"],
       "@/*": ["./src/*"]
     },
-    "types": ["node", "naive-ui/volar"]
+    "types": ["node", "vite/client", "naive-ui/volar"]
   },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
   "exclude": ["node_modules", "dist"]
 }

visualizer.ts

@@ -0,0 +1,6 @@
+import { visualizer } from 'rollup-plugin-visualizer'; // https://github.com/btd/rollup-plugin-visualizer
+export default visualizer({
+  gzipSize: true,
+  brotliSize: true,
+  open: true,
+});