1.安装mockjs和vite-plugin-mocknpm 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 功能ignorefiles?: string[]; --读取文件时忽略的文件configpath?: string;--设置模拟读取的数据条目。 当文件存在并且位于项目根目录中时，将首先读取并使用该文件。 配置文件返回一个数组prodenabled?: boolean;--设置打包是否启用 mock 功能injectfile?: string;--如果生产环境开启了 mock 功能,即prodenabled=true.则该代码会被注入到injectfile对应的文件的底部。默认为main.{ts,js}。这样做的好处是,可以动态控制生产环境是否开启 mock 且在没有开启的时候 mock.js 不会被打包。如果代码直接写在main.ts内，则不管有没有开启,最终的打包都会包含mock.jsinjectcode?: string;--injectcode代码注入的文件,默认为项目根目录下src/main.{ts,js}}
3.在根目录下创建mock文件夹新建文件夹mock/index.js
export default [{ type:'get', url:'/user/login', response: () => { return {isauth:true} }},{ type:'get', url:'/user/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.在文件中调用<template> <div class="aside"> <div class="collpase-btn" @click="collpasemenu"> <el-icon><fold /></el-icon> </div> <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" :default-active="router.path" text-color="#fff" :collapse="store.state.iscollapse" @open="handleopen" @close="handleclose" :router="true" > <el-sub-menu :index="item.id" v-for="item in menus.menslist" :key="item.id" > <template #title> <el-icon><grid /></el-icon> <span>{{ item.title }}</span> </template> <el-menu-item :index="it.id" v-for="it in item.submenulist"> {{ it.title }} </el-menu-item> </el-sub-menu> </el-menu> </div></template><script lang="ts">import axios from 'axios'import { definecomponent, onmounted, reactive } from 'vue'import { useroute } from 'vue-router'import { usestore } from 'vuex' export default definecomponent({ name: 'aside', setup() { const store = usestore() const router = useroute() const menslist: any = [] let menus = reactive({ menslist }) const handleopen = (key: string, keypath: string[]) => {} const handleclose = (key: string, keypath: string[]) => {} const collpasemenu = () => { store.dispatch('collpasechange') } onmounted(() => { axios.get('/user/menu').then((res) => { console.log(res); menus.menslist = res.data.menuslist }) }) return { handleopen, handleclose, collpasemenu, store, menus, router } },})</script> <style lang="scss" scoped>.el-menu-item.is-active { background-color: var(--el-menu-hover-bg-color);}.collpase-btn { text-align: center; width: 100%; padding: 10px 0px; cursor: pointer; .el-icon { color: white; font-size: 24px; }}</style>
5.其他如果mock文件夹建在src文件目录下，需要修改tsconfig.json文件
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue","src/mock/**/*.ts"],
以上就是vite+vue3中怎么使用mock模拟数据问题的详细内容。