vite 配置 vite-plugin-mockjs mockjs

使用场景

需求来了，前后端开发并行的情况下，直接在代码中将数据写死不仅影响代码美观，同时很多时候也无法发现 http 请求过程中的问题。

使用步骤

1. 安装

npm i mockjs vite-plugin-mock@2.9.6 -D

2. 使用

• vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from "vite-plugin-mock";
export default defineConfig({
	plugins: [
	    vue(),
	    viteMockServe({
	        mockPath: './mock', // mock文件所在文件夹
	        localEnabled: true, // 是否应用于本地
	        prodEnabled: false, // 是否应用于生产
	        supportTs: true, // 打开后 可以读取 ts 文件模块 请注意 打开后将无法监视.js 文件
	        watchFiles: true, // 监视文件更改 这样更改mock的时候，不需要重新启动编译
	      }
	    ),
	  ]
})

• 与 src 同级新建 mock 文件夹，在 mock/index.ts中写 mock 数据

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

export default [
 {
    url: "/thunder/biz/1/0/token",
      method: "get",
      response: () => {
          return {
              "resCode": "9000",
              "resDesc": "成功",
              "resData": {
                  token: () => Random.id(),
              }
          }
      }
  }
] as MockMethod[]

• 测试

axios.get('/thunder/biz/1/0/token')
	.then((res) => {
	  	console.log(res)
	})
	.catch((errr) => {
		console.log(errr)
	})

坑

1. 一定要注意vite-plugin-mock的版本， 我默认安装的是 3.0.0，结果报错

Argument of type '{ localEnabled: boolean; }' is not assignable to parameter of type 'ViteMockOptions'. Object literal may only specify known properties, and 'localEnabled' does not exist in type 'ViteMockOptions'.

后来改成2.9.6后解决报错。

npm i vite-plugin-mock@2.9.6 -D

2. 注意 mock 所在的层级！！！根据之前在 vite 上面的目录配置，mock 是和 src 平级的。一开始我放在了 src 文件夹下面，始终无法正确请求。

mockPath: './mock', // mock文件所在文件夹

总体来讲，问题都是小问题，用起来很简单，但不熟悉的人遇到奇奇怪怪的问题也就不奇怪了。（PS：仅用以记录）