vite-plugin-mock配置和net::ERR_NAME_NOT_RESOLVED问题解决

vite-plugin-mock配置和net::ERR_NAME_NOT_RESOLVED问题解决

vite-plugin-mock配置

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

我们以vue3 + ts项目为例。

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

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

// index.ts
import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
import HelloWorld from './HelloWorld'

export function setupMock () {
  // 这个是用来注册mock的，当在生产中使用mock时，很重要
  createProdMockServer([...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的官方文档

准备好这两个文件，我们就可以开始配置了。既然是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文件所在文件夹
    localEnabled: true, // 是否应用于本地
    prodEnabled: false, // 是否应用于生产
    watchFiles: true, // 监听mock文件变化
    logger: true,
    // 这个属性是给生产用的，也就是说prodEnabled必须是true才有用
    // 如果只是本地使用的话，这个属性就没必要加了
    injectCode: `
    import {setupMock} from './mock/index.ts';
    setupMock();
    `
  })]
})

配置完成之后，我们去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，它依然会报错。