前端|vite-plugin-mock使用前端|vue

开发流程很多，不同公司都有自己的一套流程，甚至一套公司里面不同的组都有自己单独的开发流程。
对前端来说，很多情况静态页面写好了，接口给了字段，要是有模拟的数据，页面开发完成，对接的时候只需要稍微调整。
【前端|vite-plugin-mock使用】所以mock的存在可以节省很多的时间，只不过以前都没用过，因为后端也有很多工具，从来没有前端自己mock过。
这次业务需要自己mock数据，所以就使用了一下，发现还挺好用的。
今天分享的是vite-plugin-mock，记录一下使用流程及一些用到的配置。
安装：

npm imockjs vite-plugin-mock -D

vite.config.ts 配置

import { UserConfigExport, ConfigEnv } from 'vite'import { viteMockServe } from 'vite-plugin-mock' import vue from '@vitejs/plugin-vue'export default ({ command }: ConfigEnv): UserConfigExport => { return { plugins: [ vue(), viteMockServe({ mockPath: 'mock', localEnabled: command === 'serve', }), ], } }

在根目录下新建mock文件夹，新建文件

import { MockMethod } from 'vite-plugin-mock'; const arr: any = []; for (let index = 0; index < 20; index++) { arr.push({ customer_name: 'wade', status_text: '登录成功', os: 'Windows 10', browser: 'Chrome(99.0.4844.51)', ip: '192.168.9.110', created: '2021-12-14 10:41:02', location: '局域网局域网', }); }const logList = { total: 31, page: 1, page_size: 20, list: arr, }; const statusList = { data: [ { label: '全部', value: 0 }, { label: '待审核', value: 1 }, ], }; export default [ { url: '/mock/api/getList', method: 'post', response: () => { return logList; }, }, { url: '/mock/api/getStatusList', method: 'get', response: () => { return statusList; }, }, ] as MockMethod[];

开发的时候这样就已经可以了，安装个axios，实验一下：

axios.get("/mock/api/getList").then((res) => { console.log(res); });

接口的模拟请求就实现了。至于生产环境使用，我是觉得不可能会用到，可以直接不用理会。
vite-plugin-mock实现其实就是本地启动了一个服务，然后进行一些数据和模拟请求的各个配置。好比我自己用node启动一个接口：

const http=require('http'); http.createServer(function(requset,response){ response.setHeader('Access-Control-Allow-Credentials', 'true'); response.setHeader('Access-Control-Allow-Origin', '*'); setTimeout(() => { response.end('#test{color:red}'); }, 3000); }).listen(3001); console.log('run port 3001')

只不过vite-plugin-mock用的是connect实现的接口，你可以复制出来在浏览器访问看看就明白了。
但是有一点没理解，项目启动代理的情况下，如果本地启动了一个mock接口，请求就会是本地启动的接口，如果本地没有，会被代理到设置的代理地址。
我觉得是代理proxy实现的，没查到xhr会自动去实现这个功能。
所以开发的时候，服务器已经有的接口可以请求服务器，没有的接口自己模拟，当要联调的时候再去mock里面把地址改一下。
至于其它配置，可以去看看是否需要：
vite-plugin-mock
tips 这边用的是npm init @vitejs/app创建项目，遇见了几个小问题
Cannot find module ‘ws’ 试了一下打包，结果报错了：

Cannot find module 'ws' or its corresponding type declarations.

看了一下，vite版本的^2.8.0，ws在devDependencies里面，自己安装了npm i --save-dev @types/ws就可以打包了。
去GitHub提了个issue，才一个小时就关闭了，原来早就有人提了。
“import.meta” is not available 去vite官网看了一下：
Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块
这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准
vite-plugin-mock生产环境使用也建议使用 import.meta.glob功能来进行全部导入,但是我打印了一下是一个空对象。
欢迎关注订阅号 coding个人笔记