vite项目中使用vite-plugin-mock来Mock后台接口

通过 vite-plugin-mock来模拟后端接口，用于应对后端先定义好接口文档，但接口未完成的时期。在配置好mock后，通过axios请求相应接口地址，可以返回预先设置的内容。以下：

一、安装

• mockjs: 用于生成模拟数据
• vite-plugin-mock: 模拟后端接口服务的插件。
• axios: 请求

npm install mockjs vite-plugin-mock -D
npm install axios -S

二、配置接口以及入口文件

• 在根目录创建mock文件夹
• 新增hello.ts （用于创建第一个接口）

import { MockMethod } from 'vite-plugin-mock'

export default [
  {
    url: '/helloWorld', // 注意，这里只能是string格式
    method: 'get',
    response: ({ query }:any) => {
      console.log(query)
      return 'hello world'
    }
  }
] as MockMethod[]

• 在mock文件夹中创建index.ts

import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
import HelloWorld from './helloWorld' //引入定义的mock模拟接口

export function setupMock () {
  // 这个是用来注册mock的，当在生产中使用mock时，很重要
  createProdMockServer([...HelloWorld])
}

三、开启mock配置

• vite.config.js配置

import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'

export default ({ command }) => {

  return {
    plugins: [
      vue(),
      viteMockServe({
        mockPath: 'mock', //解析根目录下的mock文件夹
        supportTs: true, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。
    //这样可以控制关闭mock的时候不让mock打包到最终代码内
      }),
    ],
  }
}    

• main.ts

import { setupMock } from '../mock'; //mock
if(import.meta.env === 'development'){ //dev环境开启mock
  setupMock()
}