Vite引入并使用 vite-plugin-mock自行模拟接口

1.首先引入

npm i vite-plugin-mock

2.最后 在vite.config.ts 配置 vite-plugin-mock

import { fileURLToPath, URL } from 'node:url'

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

// 引入模拟服务插件，用于在开发过程中模拟后端接口
import { viteMockServe } from 'vite-plugin-mock'

/**
 * 配置Vite开发环境。
 * 
 * 本文件使用Vite的defineConfig函数定义项目的配置细节，包括插件的使用和路径的解析等。
 * 使用vue插件支持Vue.js开发，使用viteMockServe插件提供模拟服务以方便前端开发。
 */
export default defineConfig({
  // 配置使用的插件列表
  plugins: [
    // 启用Vue.js开发支持
    vue(),
    // 启用模拟服务插件，指定模拟数据的目录
    viteMockServe({
      mockPath: "./src/mock"
    })
  ],
  // 配置模块解析规则
  resolve: {
    // 定义别名，简化模块路径引用
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})