vue3中使用mock

1.安装mockjs和vite-plugin-mock

npm i mockjs vite-plugin-mock --save-dev

2.在vite.config.js文件中配置vite-plugin-mock

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

export default defineConfig({
  plugins: [vue(),
    viteMockServe({
      supportTs:false,
      logger: false,
      mockPath: "./mock/"
    })
  ]
})

supportTs?: boolean; --是否读取ts文件模块，设置为true时不能读取js文件
logger?:boolean; --是否在控制台显示请求日志
mockPath?: string; --设置模拟数据的存储文件夹，如果不是index.js需要写明完整路径

https://vitejs.dev/config/

3.在根目录下创建mock文件夹

index.js模拟数据如下：

export default [
  {
    type: "post",
    url: "/login",
    response: () => {
      return { isAuth: true };
    },
  },
  {
    type: "get",
    url: "/menu",
    response: () => {
      return {
        menusList: [
          {
            id: "/sysManagent",
            title: "系统管理",
            subMenuList: [
              {
                id: "/userList",
                title: "用户管理",
                path: "/user/manage",
              },
              {
                id: "/roleList",
                title: "角色管理",
                path: "/user/role",
              },
              {
                id: "/permissionList",
                title: "权限管理",
                path: "/user/permission",
              },
            ],
          },
          {
            id: "businessManagent",
            title: "业务管理",
            subMenuList: [
              {
                id: "/businessList",
                title: "业务逻辑",
              },
            ],
          },
        ],
        statusCode: 200,
      };
    },
  },
];

4.在文件中调用

<script lang="ts" setup>
	import axios from 'axios'
	import {onMounted} from 'vue';
	onMounted(() => {
	  axios.post('/menu').then((res) => {
	    console.log(res);
	  })
	})
</script>

请求到的数据如下图：