vue3 Mock 数据使用

最新推荐文章于 2025-07-03 15:43:27 发布

前端小云儿

最新推荐文章于 2025-07-03 15:43:27 发布

阅读量451

点赞数

CC 4.0 BY-SA版权

分类专栏： vue3知识点文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/jieweiwujie/article/details/136127298

vue3知识点专栏收录该内容

88 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Vue3项目中如何配置和使用Mock数据。首先，讲解了Mock数据的不同方式，接着详细说明了安装相关依赖、在vite.config.js中启用Mock插件的步骤。然后指导在项目根目录创建mock文件夹并建立接口数据文件，如user.ts。此外，还提到了axios作为接口插件的安装，并提示在main.js中进行页面测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. Mock 数据的方式

pnpm install -D mockjs 
pnpm install -D vite-plugin-mock mockjs

2 安装依赖

或者使用npm都可以

pnpm install -D mockjs 

pnpm install -D vite-plugin-mock mockjs

3 在 vite.config.js 配置文件启用插件。

只看 viteMockServe相关的

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

import {
  defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import {
  createSvgIconsPlugin
} from 'vite-plugin-svg-icons'
import path from 'path'
//配置mock数据
import {
  viteMockServe
} from 'vite-plugin-mock'

// https://vitejs.dev/config/

//这里改成写的方法返回 { command } 参数用来获取环境变量，只是开发环境使用
export default (({
  command
}) => {
  return {
    plugins: [