前言

前后端分离前端需要数据可以使用Mock,更加方便，故学习
vite-plugin-mock

开始

注意:当前是3.0.0版本，目前发现修改mock文件会生成很多个xxx.mjs文件,控制台不停报错，issue,关注是否已经解决

安装 (yarn or npm)

1
2
3
4
5
yarn add mockjs
# or
npm i  mockjs -S
# or
pnpm add mockjs

and

1
2
3
4
5
yarn add vite-plugin-mock -D
# or
npm i vite-plugin-mock -D
# or
pnpm add vite-plugin-mock -D

开发环境使用

开发环境是使用 Connect 中间件实现的。
与生产环境不同，您可以在 Google Chrome 控制台中查看网络请求记录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//vite.config.ts 配置
import { UserConfigExport, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
export default ({ command }: ConfigEnv): UserConfigExport => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        mockPath: './src/mock',
        enable: true,
      }),
    ],
  }
}
1
2
3
4
5
6
7
8
9
10
//viteMockServe 配置
{
    mockPath?: string;
    ignore?: RegExp | ((fileName: string) => boolean);
    watchFiles?: boolean;
    enable?: boolean;
    ignoreFiles?: string[];
    configPath?: string;
    logger?:boolean;
}
  • mockPath
    type: string
    default: mock
    设置模拟.ts 文件的存储文件夹
    如果watchFiles：true，将监视文件夹中的文件更改。 并实时同步到请求结果
    如果 configPath 具有值，则无效
  • ignore
    type: RegExp | ((fileName: string) => boolean);
    default: undefined
    自动读取模拟.ts 文件时，请忽略指定格式的文件
  • watchFiles
    type: boolean
    default: true
    设置是否监视mockPath对应的文件夹内文件中的更改
  • enable
    type: boolean
    default: true
    是否启用 mock 功能
  • configPath
    type: string
    default: vite.mock.config.ts
    设置模拟读取的数据条目。 当文件存在并且位于项目根目录中时，将首先读取并使用该文件。 配置文件返回一个数组
  • logger
    type: boolean
    default: true
    是否在控制台显示请求日志

Mock实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 // src/mock/index.ts
import { MockMethod, MockConfig } from 'vite-plugin-mock'

// 第一种方式
export default [
  {
    url: '/api/get',
    method: 'get',
    response: ({ query }) => {
      return {
        code: 0,
        data: {
          name: 'vben',
        },
      }
    },
  },
  {
    url: '/api/post',
    method: 'post',
    timeout: 2000,
    response: {
      code: 0,
      data: {
        name: 'vben',
      },
    },
  },
  {
    url: '/api/text',
    method: 'post',
    rawResponse: async (req, res) => {
      let reqbody = ''
      await new Promise((resolve) => {
        req.on('data', (chunk) => {
          reqbody += chunk
        })
        req.on('end', () => resolve(undefined))
      })
      res.setHeader('Content-Type', 'text/plain')
      res.statusCode = 200
      res.end(`hello, ${reqbody}`)
    },
  },
] as MockMethod[]
// 第二种方式
export default function (config: MockConfig) {
  return [
    {
      url: '/api/text',
      method: 'post',
      rawResponse: async (req, res) => {
        let reqbody = ''
        await new Promise((resolve) => {
          req.on('data', (chunk) => {
            reqbody += chunk
          })
          req.on('end', () => resolve(undefined))
        })
        res.setHeader('Content-Type', 'text/plain')
        res.statusCode = 200
        res.end(`hello, ${reqbody}`)
      },
    },
  ]
}

Mock配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  // 请求地址
  url: string;
  // 请求方式
  method?: MethodType;
  // 设置超时时间
  timeout?: number;
  // 状态吗
  statusCode?:number;
  // 响应数据（JSON）
  response?: ((opt: { [key: string]: string; body: Record<string,any>; query:  Record<string,any>, headers: Record<string, any>; }) => any) | any;
  // 响应（非JSON）
  rawResponse?: (req: IncomingMessage, res: ServerResponse) => void;
}

生产环境中的使用

创建mockProdServer.ts文件

1
2
3
4
5
6
7
8
9
10
11
//  mockProdServer.ts
import { createProdMockServer } from 'vite-plugin-mock/client'

// 逐一导入您的mock.ts文件
// 如果使用vite.mock.config.ts，只需直接导入文件
// 可以使用 import.meta.glob功能来进行全部导入
import testModule from '../mock/test'

export function setupProdMockServer() {
  createProdMockServer([...testModule])
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//配置 vite-plugin-mock
import { viteMockServe } from 'vite-plugin-mock'
import { UserConfigExport, ConfigEnv } from 'vite'
export default ({ command }: ConfigEnv): UserConfigExport => {
  return {
    plugins: [
      viteMockServe({
        mockPath: 'mock',
        // 根据项目配置。可以配置在.env文件
        enable: true,
      }),
    ],
  }
}

加餐

如何运行打包好的dist文件

1
2
3
4
npm install -g http-server
cd dist
# 启动http-server。在命令行中执行以下命令：
http-server

此时，在命令行中会输出生成的服务网站

注意。默认网址端口号是8080，如果已经被占用可使用 ​​​​​​​http-server -p 8081 来修改端口