Vite2 + vue3 + TS + ElementPlus 从零搭建后台管理系统（六）

上一章主要完成了 breadcrumb 和 tagsView 组件 Vite2 + vue3 + TS + ElementPlus 从零搭建后台管理系统（五）

这一章开始将添加 mockjs模拟数据

1.安装 mockjs 和 vite-plugin-mock

node version: >=12.0.0

vite version: >=2.0.0

• yarn add mockjs -S
• yarn add vite-plugin-mock -D

或者:

• npm install mockjs -S
• npm install vite-plugin-mock -D

viteMockServe 配置：

{
  mockPath?: string; //设置mock 模拟数据 .ts 文件的存储文件夹
  supportTs?: boolean; // 可以读取 ts 文件模块。
  ignore?: RegExp | ((fileName: string) => boolean);// 忽略指定格式的文件
  ignoreFiles?: string[]; // 忽略指定文件夹
  watchFiles?: boolean; // 是否监视mockPath对应的文件夹内文件中的更改
  localEnabled?: boolean;// 是否启用本地 xxx.ts 文件，设置为 false 将禁用 mock 功能
  prodEnabled?: boolean; // 打包是否启用 mock 功能
  configPath?: string; // 模拟读取的数据条目
  injectFile?: string; // injectCode代码注入的文件,默认为项目根目录下src/main.{ts,js}
  injectCode?: string; // 是否代码会注入到injectFile对应的文件的底部
  logger?:boolean; // 是否在控制台显示请求日志
}

2.Mock file example

在根目录下新建:

mock/demo/user.ts

mock/_createMockServer.ts

user.ts:

import { MockMethod } from 'vite-plugin-mock'

function createFakeUserList() {
  return [
    {
      userId: '1',
      username: 'admin',
      realName: 'admin',
      desc: 'manager',
      password: '123456',
      token: 'fakeToken1',
      roles: [
        {
          roleName: 'Super Admin',
          value: 'super'
        }
      ]
    },
    {
      userId: '2',
      username: 'test',
      password: '123456',
      desc: 'tester',
      token: 'fakeToken2',
      roles: [
        {
          roleName: 'Tester',
          value: 'test'
        }
      ]
    }
  ]
}

function resultSuccess(
  result: Record<string, unknown>,
  { message = 'ok' } = {}
) {
  return {
    code: 0,
    result,
    message,
    type: 'success'
  }
}

function resultError(
  message = 'Request failed',
  { code = -1, result = null } = {}
) {
  return {
    code,
    result,
    message,
    type: 'error'
  }
}

export default [
  // mock user login
  {
    url: '/mock-api/login',
    timeout: 200,
    method: 'post',
    response: ({ body }) => {
      const { username, password } = body
      const checkUser = createFakeUserList().find(
        (item) => item.username === username && password === item.password
      )

      if (!checkUser) {
        return resultError('Incorrect account or password！')
      }
      const {
        userId,
        username: _username,
        token,
        realName,
        desc,
        roles
      } = checkUser
      return resultSuccess({
        roles,
        userId,
        username: _username,
        token,
        realName,
        desc
      })
    }
  }
] as MockMethod[]

_createMockServer.ts：

import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'

const modules = import.meta.globEager('./**/*.ts')

const mockModules: any[] = []
Object.keys(modules).forEach((key) => {
  if (key.includes('/_')) {
    return
  }
  mockModules.push(...modules[key].default)
})

/**
 * Used in a production environment. Need to manually import all modules
 */
export function setupProdMockServer() {
  createProdMockServer(mockModules)
}

注意：此时import.meta.globEager可能会有错误提示

修改 tsconfig.json 配置的 include 属性：

  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "mock/**/*.ts" //++ 新增
  ]

3.配置使用 vite-plugin-mock

在 src/plugins下新建

configMockPlugin.ts

/**
 * Mock plugin for development and production.
 * https://github.com/anncwb/vite-plugin-mock
 */
 import { viteMockServe } from 'vite-plugin-mock';

 export function configMockPlugin(isBuild: boolean) {
   return viteMockServe({
     ignore: /^\_/,
     mockPath: 'mock',
     localEnabled: !isBuild,
     prodEnabled: isBuild,
     injectCode: `
       import { setupProdMockServer } from '../mock/_createMockServer';
 
       setupProdMockServer();
       `,
   });
 }
 

4.完善 vite.config.ts

目前 vite.config.ts 是这样直接导出的对象；

export default defineConfig({
  ...
})

修改为：

export default ({ command, mode }: ConfigEnv): UserConfigExport => {
    const isBuild = command === 'build'
  return defineConfig({
    ...
  })
})

ConfigEnv 和 UserConfigExport 从 'vite' 中导入

import { defineConfig, ConfigEnv, UserConfigExport } from 'vite'

然后在 plugins 配置中新增一项目：

configMockPlugin(isBuild) // mock 模拟请求

5. 测试 mock

在 src 目录下新增：

api/login/index.ts

index.ts：

import request from '@/utils/request';

// 用户登录
export function signIn(params: object) {
	return request({
		url: '/mock-api/login',
		method: 'post',
		data: params,
	});
}

修改scr/views/demo/index.vue：

<template>
  <div>
    <div>demo</div>
    <el-button @click="handleSignIn">登录</el-button>
  </div>
</template>

<script>
import {signIn} from '@/api/login/index'

export default {
  setup(){
    const handleSignIn = ()=>{
      signIn().then((res)=>{
        console.log(res);
      }).catch((err)=>{
        console.log(err);
      })
    }
    return {
      handleSignIn
    }
  }
}

</script>

<style>

</style>

修改 src/utils/request.ts：

...
export const PATH_URL: string ='/'
...

进入 /demo 下 点击登录按钮，获得如下：

本地获取 mock模拟数据 成功