vue3中Mock数据的实现：vite-plugin-mock

在我们开发的过程中，经常会碰到前端已经开发的差不多了，后端跟不上的情况，至此，我们就需要进行前端mock数据。 在我们进行mock数据的时候需要考虑的几个问题有：

1. 需要浏览器能看到请求与返回数据（完全模拟真实请求）
2. mock请求与真实请求的区分
3. mock数据可以根据条件来是否打包到项目中

vite-plugin-mock其实就是本地启动了一个服务，然后进行一些数据和模拟请求的各个配置。好比我自己用node启动一个接口,只不过vite-plugin-mock用的是connect实现的接口,满足了我们完全模拟真实请求的需要。 vite-plugin-mock

1. 安装mockjs

执行 npm install --save-dev mockjs

2. 在src文件夹下创建mock文件夹

mock文件夹下index.js负责拦截请求

3. 安装vite-plugin-mock插件

执行npm install --save-dev vite-plugin-mock

4. 在main.js中引入mockjs

import '@/mock/index.js'

4. 引入并配置vite-plugin-mock插件

import vue from '@vitejs/plugin-vue'

import createAutoImport from './auto-import'
import { viteMockServe } from 'vite-plugin-mock'

export default function createVitePlugins(viteEnv, isBuild = false) {
    const vitePlugins = [
        vue(),
        viteMockServe({
            mockPath: 'src/mock',
            enable: true,
            localEnabled: true,
            supportTs: false,
            watchFiles: true
        })]
    vitePlugins.push(createAutoImport())
    // vitePlugins.push(createSetupExtend())
    // vitePlugins.push(createSvgIcon(isBuild))
    // isBuild && vitePlugins.push(...createCompression(viteEnv))
    return vitePlugins
}

// 注意：mockPath的路径前面不能加'/'