作为一个前端开发，没有后端接口而自己还不会写后端，那可以自己写数据来进行页面的渲染展示。

我们首先可以想到的是直接在代码中写大量的数据，直接造嘛，简单粗暴。缺点就是大量的数据代码破坏整体代码结构，而且后期对接真正的接口会进行大量的修改，所以还是需要一定的工作量。

我们想的是先把所有请求方式参数都订好，后期对接只需要切换下请求的接口，自动换成后台的数据。所以我们可以使用mockjs来进行数据的填写。

之前我有写过一篇基于vue-cli的mockjsmockjs基本使用的基本使用。但本次项目使用vite开发，同时还有一个基于vitejs开发的数据模拟插件vite-plugin-mock。能帮助我们更快更方便实现数据模拟，妈妈再也不用担心没有后端数据了。

安装

利用vite创建一个脚手架，这里我创建的是vue3+ts项目。

安装依赖：

# yarn
yarn add mockjs

# npm
npm i  mockjs -S

# yarn
yarn add vite-plugin-mock -D

# npm
npm i vite-plugin-mock -D

这里主要说明在开发环境中使用，详细的可以查看插件文档。

配置

配置vite.config.ts

import { defineConfig, loadEnv } from 'vite';
import { viteMockServe } from 'vite-plugin-mock';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default ({ mode }) => {
  return defineConfig({
    plugins: [
      vue(),
      viteMockServe({
        mockPath: 'src/mock',
        localEnabled: !!loadEnv(mode, process.cwd()).VITE_MOCK
      }),
    ],
  });
};

可以看到我们引入配置对象配置了两个选项:

mockPath主要是说明模拟数据文件的位置，这里写的路径会自动拼接项目的工作目录。
localEnabled，设置是否引入本地的模拟数据文件，传入一个布尔值。我们在开发环境就设置为true，生产环境就设置为false就行了。可以根据环境变量来判断这个值。 我们可以再项目根目录配置.env.xxx文件来设置环境变量。

注意：在vite中我们在项目文件中获取环境变量和在vite.config.ts是不一样的。

例如：
配置的开发环境变量如下。

在项目中引入：

import.meta.env.VITE_BASE_API

而在vite.config.ts中引入需要这样：

// 在vite中引入loadEnv依赖
import { defineConfig, loadEnv } from 'vite';

//以函数的方式配置,解构使用mode参数
export default ({ mode }) => {
  return defineConfig({
    plugins: [
      //...
      viteMockServe({
        mockPath: 'src/mock',
        localEnabled: !!loadEnv(mode, process.cwd()).VITE_MOCK
      }),
    ],
  });
};

模拟数据配置

在设置的mock目录下创建xxx.ts文件：

这里我设置了一个登录模拟接口。

import type { MockMethod } from 'vite-plugin-mock';
// 登录模拟
const apiArr: MockMethod[] = [
  {
    url: '/api/login',
    method: 'post',
    rawResponse: async (req, res) => {
      let reqbody = '';
      await new Promise((resolve) => {
        req.on('data', (chunk) => {
          reqbody += chunk;
        });
        req.on('end', () => {
          const body = JSON.parse(reqbody);
          if (body.name === 'saber' && body.password === 'Qw123456') {
            res.statusCode = 200;
            reqbody = JSON.stringify({
              code: 200,
              data: {
                id: 0,
                token: 'djlk23123fwqead89-08s8d09-88'
              }
            });
          } else {
            res.statusCode = 400;
            reqbody = '账号或者密码错误';
          }
          resolve(undefined);
        });
      });
      res.setHeader('Content-Type', 'application/json;charset=UTF-8');
      res.end(reqbody);
    }
  }
];

export { apiArr };

详细的配置可以文档，我们通过这个数组来配置多个请求，我们通过axios的请求就会被拦截走这里的逻辑，这里的响应方式还可以选择原生的方式，来使请求更加的真实。注意，我们配置的这个数据最后要默认导出，你可以设置一个文件来统一导出这些数组，总之要有一个文件汇总这些请求配置到一个数组中，然后默认导出这个数组，之后插件就会自动读取了。