vue,vite项目中使用mock(使用vite-plugin-mock插件)

mock属于一个我不怎么会用的功能，但又怕必要时忘记流程，因此在此做个记录，过程尽量简短。

安装

npm i  mockjs vite-plugin-mock -D

vite.config.ts 配置

export default defineConfig({
  ...,
  viteMockServe({
    // default
    mockPath: 'mock',
  }),
})

在根目录下新建mock文件夹

在mock文件夹中新建data文件夹，新建示例文件test.ts

export default {
         no: 1,
        title: "这是一个测试"
      }

在mock文件夹中新建文件index.ts

import { MockMethod } from 'vite-plugin-mock'
import test from './data/test'


export default [
  {
    url: "/api/test",
    method: 'get',
    response: () => {
      return {
        code: 200,
        result:test
      }
    },
  }
] as MockMethod[]

在typescript中使用

<script setup lang="ts">
import { ref } from "vue";
const t= ref<T>();

interface T{
  no: number;
  title: string;
}


axios({
    method: 'GET',
    url: "/api/test"
})
.then(res => {
	t.value = res.data.result;
})
 </script>

t即为我们最终得到的数据