vite+vue3中使用mock模拟数据

最新推荐文章于 2024-08-01 09:57:29 发布

liguoyuan819

最新推荐文章于 2024-08-01 09:57:29 发布

阅读量6k

点赞数 2

分类专栏： Vue使用文章标签： vue.js

本文链接：https://blog.csdn.net/liguoyuan819/article/details/124768562

版权

本文介绍了在Vite+Vue3项目中如何使用mockjs和vite-plugin-mock来模拟数据。详细步骤包括安装相关库，配置vite.config.ts，创建mock文件夹，并在项目中调用mock数据。同时，文章提到了tsconfig.json的修改，以便在src目录下使用mock文件夹。

摘要由CSDN通过智能技术生成

1.安装mockjs和vite-plugin-mock

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

2.在vite.config.ts文件中配置vite-plugin-mock使用方式

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

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

vite-plugin-mock 中的配置内容的含义

{

supportTs?: boolean; --是否读取ts文件模块，设置为true时不能读取js文件

logger?:boolean; --是否在控制台显示请求日志
mockPath?: string; --设置模拟数据的存储文件夹，如果不是index.js需要写明完整路径
ignore?: RegExp | ((fileName: string) => boolean);--读取文件时忽略指定格式的文件
watchFiles?: boolean;--是否监视mockPath文件夹内文件的修改
localEnabled?: boolean;--设置是否启用本地 xxx.ts 文件，不要在生产环境中打开它.设置为 false 将禁用 mock 功能
ignoreFi