本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

本章讲解Mock在Vite中的配置，Mock.js可以生成随机数据,拦截Ajax请求，前后端分离让前端攻城师独立于后端进行开发。 增加单元测试的真实性 通过随机数据,模拟各种场景。

推荐阅读

• vite.config.ts 之 Env 篇 (九)

vite.config.ts 之 Plugins 篇 (十)

vite-plugin-mock

# 选择一个你喜欢的包管理器

# NPM
npm install mockjs -S
npm install vite-plugin-mock -D

# Yarn
yarn add mockjs -S
yarn add vite-plugin-mock -D

# PNPM
pnpm install mockjs -S
pnpm install vite-plugin-mock -D

• 配置

plugins目录下创建mock.ts文件配置如下：

// mock.ts
import { viteMockServe } from 'vite-plugin-mock'
export function configMockPlugin(isBuild: boolean) {
  return viteMockServe({
    mockPath: 'mock',
    localEnabled: !isBuild,
    prodEnabled: isBuild,
    logger: true,
  })
}

mockPath指定mock目录

• 添加配置

import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import legacy from '@vitejs/plugin-legacy'
import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'
import { configMockPlugin } from './mock'
import { configCompressPlugin } from './compress'
import { configImageminPlugin } from './imagemin'
import { configStyleImportPlugin } from './style'
import {
  configAutoImportPlugin,
  configVueComponentsPlugin,
  configVueIconsPlugin,
  configVuePurgeIconsPlugin,
} from './unplugin'
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
  const {
    VITE_USE_IMAGEMIN,
    VITE_USE_COMPRESS,
    VITE_COMPRESS_DELETE_ORIGIN_FILE,
    VITE_USE_MOCK,
    VITE_LEGACY,
  } = viteEnv
  const plugins = [vue(), vueSetupExtend(), PkgConfig(), OptimizationPersist()]
  // vite-plugin-mock
  VITE_USE_MOCK && plugins.push(configMockPlugin(isBuild))
  // 是否为打包后的文件提供传统浏览器兼容性支持
  VITE_LEGACY &&
    plugins.push(
      legacy({
        targets: ['ie >= 11'],
        additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      })
    )
  if (isBuild) {
    // vite-plugin-compress
    VITE_USE_COMPRESS && plugins.push(configCompressPlugin(VITE_COMPRESS_DELETE_ORIGIN_FILE))
    // vite-plugin-imagemin
    VITE_USE_IMAGEMIN && plugins.push(configImageminPlugin())
  }
  // unplugin-auto-import
  plugins.push(configAutoImportPlugin())
  // unplugin-vue-components
  plugins.push(configVueComponentsPlugin())
  // vite-plugin-style-import
  plugins.push(configStyleImportPlugin())
  // unplugin-icons
  plugins.push(configVueIconsPlugin())
  // vite-plugin-purge-icons
  plugins.push(configVuePurgeIconsPlugin())
  return plugins
}

• 使用

在根目录中创建mock文件夹，在文件夹下创建user.ts文件mockjs使用方法如下：

const { Random } = require('mockjs')
import { MockMethod } from 'vite-plugin-mock'
const tokens: any = {
  admin: `admin-token-${Random.guid()}-${new Date().getTime()}`,
  editor: `editor-token-${Random.guid()}-${new Date().getTime()}`,
  test: `test-token-${Random.guid()}-${new Date().getTime()}`,
}
const username2role: any = {
  admin: ['Admin'],
  editor: ['Editor'],
  test: ['Admin', 'Editor'],
}
const role2permission: any = {
  Admin: ['read:system', 'write:system', 'delete:system'],
  Editor: ['read:system', 'write:system'],
  Test: ['read:system'],
}
export default [
  {
    url: '/system/login',
    timeout: 200,
    method: 'POST',
    response: ({ body }: any) => {
      const { username } = body
      const token = tokens[username]
      if (!token)
        return {
          code: 500,
          msg: '帐户或密码不正确',
        }
      return {
        code: 200,
        msg: 'success',
        data: { token },
      }
    },
  },
  {
    url: '/system/logout',
    timeout: 200,
    method: 'get',
    response() {
      return {
        code: 200,
        msg: 'success',
      }
    },
  },
  {
    url: '/system/user/getUserInfo',
    method: 'get',
    response: (config: any) => {
      const authorization = config.headers.authorization || config.headers.Authorization
      if (!authorization.startsWith('Bearer '))
        return {
          code: 401,
          msg: '令牌无效',
        }
      const username = authorization.replace('Bearer ', '').split('-token-')[0]
      const roles = username2role[username] || []
      const permissions = [...new Set(roles.flatMap((role: any) => role2permission[role]))]
      return {
        code: 200,
        msg: 'success',
        data: {
          username,
          roles,
          permissions,
          avatar: 'https://p3-passport.byteacctimg.com/img/user-avatar/44534828b73a60680508a3de7a8750d2~300x300.image',
        },
      }
    },
  },
] as MockMethod[]

在后面章节中会使用Axios请求访问Mock

继续学习

废话只说一句：码字不易求个👍，收藏 === 学会,快行动起来吧！🙇‍🙇‍🙇‍。

# Vite+Vue3+TypeScript+Element (十一) 搭建企业级轻量框架实践