在vite（vue）项目中使用mockjs

在Vite项目中使用Mock.js可以帮助你模拟后端数据，使得前端开发不依赖于后端的接口实现。以下是如何在Vite项目中使用Mock.js的步骤：

1. 安装Mock.js库：

npm install mockjs --save-dev

2. 在项目中创建一个mock的文件，例如mock/data.js，用于定义模拟数据和规则：

// mock/data.js
import Mock from 'mockjs'
 
const data = Mock.mock({
  'items|30': [{
    id: '@id',
    name: '@name',
    'age|18-30': 1
  }]
})
 
export default data

3. 创建一个mock服务器的入口文件，例如mock/index.js，用于启动Mock服务：

// mock/index.js
import Mock from 'mockjs'
import data from './data.js'
 
Mock.mock('/api/users', 'get', data.items)

4. 在项目的入口文件（如main.js或main.ts）中引入并启动Mock服务：

// main.js
import './mock/index.js'
 
// ... 其他Vue初始化代码

5. 在你的Vue组件或者服务中，你可以像使用正常的API一样请求模拟数据：

// 在组件中
import axios from 'axios'
 
export default {
  async mounted() {
    try {
      const response = await axios.get('/api/users')
      console.log(response.data) // 这里将会得到模拟的数据
    } catch (error) {
      console.error(error)
    }
  }
}

确保你的Mock服务器运行在一个不与生产环境冲突的端口上，并且在发起请求时使用正确的API路径。这样，你就可以在不连接后端API的情况下进行前端开发了。