Vite-Vue3-TypeScript：008-安装配置mock

在Vite + Vue 3 + TypeScript项目中安装和配置Mock服务通常涉及以下步骤：

1. 安装依赖：

npm install mockjs --save-dev

2. 在项目中创建一个mock文件夹，并添加一个index.ts文件来配置Mock规则。

// mock/index.ts
import Mock from 'mockjs'
 
// Mock数据
const data = Mock.mock({
  'items|30': [{
    id: '@id',
    name: '@name',
    'age|18-30': 1
  }]
})
 
// Mock API
Mock.mock('/api/users', 'get', () => {
  return {
    code: 200,
    data: data.items
  }
})

3. 在vite.config.ts中配置Mock服务（如果有）。

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// 如果使用了环境变量，确保MOCK_ENABLED在.env文件中被设置
const isMockEnabled = process.env.MOCK_ENABLED === 'true'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 如果启用了Mock，则设置服务代理来使用Mock服务器
  server: isMockEnabled
    ? {
        proxy: {
          '/api': {
            target: 'http://localhost:5000', // Mock服务器地址
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, '')
          }
        }
      }
    : {}
})

4. 在package.json中添加启动Mock服务的脚本。

"scripts": {
  "mock": "vite --mock"
}

5. 启动Mock服务器。

npm run mock

6. 在应用中发送API请求，Mock服务将会返回模拟数据。

注意：以上步骤仅提供了一个基本的Mock配置示例。具体的Mock服务器设置可能会根据项目的具体需求和Mock.js库的功能有所不同。