vite配置vite-plugin-mock

 

1.安装vite-plugin-mock

npm i axios mockjs -s
npm i cross-env vite-plugin-mock -D

2.在根目录创建mock文件夹，然后添加helloWorld.ts 文件（注意是ts文件，需要js的写法自行转换）

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

export default [
  {
    url: '/helloWorld', // 注意，这里只能是string格式
    method: 'get',
    response: ({ query }:any) => {
      console.log(query)
      return 'hello world'
    }
  }
] as MockMethod[] // 这里其实就是定义数据格式的，不了解的同学可以参考typescript的官方文档

3.根目录创建的mock文件夹目录下创建index.ts文件

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

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

4.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文件夹
        localEnabled: command === 'serve', //开发打包开关
        prodEnabled: command !== 'serve' ,// 生产打包开关
        supportTs: true, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。
    //这样可以控制关闭mock的时候不让mock打包到最终代码内
      injectCode: `
          import { setupMock } from '../mock';
          setupMock();
          `,
      }),
    ],
  }
}    

 

5.本地mock

删除vite.config.js中viteMockServe配置下的injectCode和prodEnabled选项，或将prodMock = false
在main.js中添加

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