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实现的接口，你可以复制出来在浏览器访问看看就明白了。

但是有一点没理解，项目启动代理的情况下，如果本地启动了一个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个人笔记