vite-plugin-mock配置和QA

原创已于 2024-05-12 12:30:42 修改 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #javascript #vue.js #vite

于 2022-03-13 20:31:50 首次发布

前端专栏收录该内容

44 篇文章

订阅专栏

本文档详细介绍了如何在 Vue3+TS 项目中配置 vite-plugin-mock，包括创建 mock 文件夹、编写 mock 数据和入口文件，以及在 vite.config.js 中的配置。在使用过程中需要注意，vite-plugin-mock 的 URL 配置必须严格匹配，不支持正则表达式，并且在 Docker 开发环境中可能遇到端口转发问题。解决办法是通过修改 vite.config.js 中的代理配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vite-plugin-mock配置

这个配置其实按照官网的来就很好，如果觉得官网看不明白的，可以接着我的往下看。

我们以vue3 + ts项目为例。

首先，在项目根目录创建文件夹mock用来保存mock的相关文件。

然后，我们在mock文件夹中创建index.ts入口文件和HelloWorld.ts测试文件。

// index.ts/index.js
import HelloWorld from './HelloWorld'
export default [...HelloWorld]

// HelloWorld.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[] // 这里其实就是定义数据格式的，不了解的同学可以参考typescript的官方文档

// HelloWorld.js 没有使用typescript的话，这么写就可以了
export default [
  {
    url: '/helloWorld', // 注意，这里只能是string格式
    method: 'get',
    response: ({ query }:any) => {
      console.log(query)
      return 'hello world'
    }
  }
]

准备好这两个文件，我们就可以开始配置了。既然是vite的插件，我们当然需要到vite.config.js文件中进行配置，配置如下：

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

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), viteMockServe({
    mockPath: 'mock', // mock文件所在文件夹
    enable: true, // 是否应用
    watchFiles: true, // 监听mock文件变化
    logger: true,
    supportTs: true, // 如果是true，js文件将会被忽视
  })]
})

配置完成之后，我们去HelloWorld.vue文件调用一下。

import { onBeforeMount, ref } from 'vue'
import axios from 'axios'

defineProps<{ msg: string }>()

const count = ref(0)

onBeforeMount(async () => {
  const message = await axios.get('/helloWorld')
  console.log(message)
})

启动项目，看看结果：
在这里插入图片描述

net::ERR_NAME_NOT_RESOLVED问题

整个使用过程，其实并不是那么顺利的。

我一开始以为vite-plugin-mock和mockjs一样可以支持正则表达式，事实上并不是。

如果你在请求地址前面加东西，例如/test/helloWorld或者http://test.com/helloWorld的话，就会出现地址解析错误。所以，地址一定要和配置一致。

不过，它是支持/helloWorld/:name这样的带参地址的，也就是说/helloWorld/test它是认的，这点要注意。但是，这个配置依然很严格，如果你的地址变成/helloWorld/test/test，它依然会报错。

wsl的docker开发容器问题

在wsl中的docker开发容器中开发，会发现无法正常拦截请求。
这是因为端口转发问题，使得服务无法被找到。
配置一下vite.conig.js文件就可以了，增加一个端口转发，把端口再指回来：

server: {
  port: 5173,
  host: true,
  proxy: {
    "^/api": {
      target: "http://localhost:5173/",
      changeOrigin: true,
    },
  },
},