vite+vue3中如何使用mock模拟数据问题

这篇文章主要介绍“vite+vue3中如何使用mock模拟数据问题”，在日常操作中，相信很多人在vite+vue3中如何使用mock模拟数据问题问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vite+vue3中如何使用mock模拟数据问题”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联专注于网站制作、成都网站建设、网页设计、网站制作、网站开发。公司秉持“客户至上,用心服务”的宗旨,从客户的利益和观点出发,让客户在网络营销中找到自己的驻足之地。尊重和关怀每一位客户，用严谨的态度对待客户，用专业的服务创造价值，成为客户值得信赖的朋友，为客户解除后顾之忧。

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 功能
ignoreFiles?: string[]; --读取文件时忽略的文件
configPath?: string;--设置模拟读取的数据条目。 当文件存在并且位于项目根目录中时，将首先读取并使用该文件。 配置文件返回一个数组
prodEnabled?: boolean;--设置打包是否启用 mock 功能
injectFile?: string;--如果生产环境开启了 mock 功能,即prodEnabled=true.则该代码会被注入到injectFile对应的文件的底部。默认为main.{ts,js}。这样做的好处是,可以动态控制生产环境是否开启 mock 且在没有开启的时候 mock.js 不会被打包。如果代码直接写在main.ts内，则不管有没有开启,最终的打包都会包含mock.js

injectCode?: 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.在文件中调用

        
          {{ it.title }}