vue3 vite中使用mockjs

在Vue3 Vite项目中使用Mock.js，你可以按照以下步骤进行配置：

1. 首先，创建一个Vue3 Vite项目并进入项目文件夹。
2. 执行`yarn`命令安装项目依赖。
3. 安装axios、mockjs和vite-plugin-mock插件，可以使用以下命令进行安装：`yarn add axios mockjs vite-plugin-mock`。
4. 修改vite.config.js文件，引入vite-plugin-mock插件，并配置mockPath为"./mock/"。示例代码如下：

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

export default defineConfig({
  plugins: \[
    vue(),
    viteMockServe({
      mockPath: "./mock/"
    })
  \]
})

5. 在根目录下创建一个mock文件夹，用于存放mock数据。
6. 在需要使用mock数据的组件中引入并使用Mock.js。你可以在组件中使用Mock.js生成模拟数据。例如：

import Mock from 'mockjs'

const data = Mock.mock({
  'list|1-10': \[{
    'id|+1': 1,
    'name': '@cname',
    'age|18-60': 1
  }\]
})

console.log(data)

这样，你就可以在Vue3 Vite项目中使用Mock.js来模拟接口数据了。
#### 引用[.reference_title]
- *1* *2* [在vite（vue）项目中使用mockjs](https://blog.csdn.net/lhkuxia/article/details/125000115)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [Vue3+Vite项目使用mockjs模拟数据](https://blog.csdn.net/m0_72788309/article/details/129534945)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]