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即为我们最终得到的数据