vite-plugin-mock使用
所以mock的存在可以节省很多的时间，只不过以前都没用过，因为后端也有很多工具，从来没有前端自己mock过。这次业务需要自己mock数据，所以就使用了一下，发现还挺好用的。
今天分享的是vite-plugin-mock，记录一下使用流程及一些用到的配置。
安装：
npm i mockjs 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。get实现的接口，你可以复制出来在浏览器访问看看就明白了。
但是有一点没理解，项目启动代理的情况下，如果本地启动了一个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功能来进行全部导入,但是我打印了一下是一个空对象。