vue3 学习笔记05 -- mock的使用

vue3 学习笔记05 -- mock的使用

mock主要用途仅为模拟后端数据接口

  • 安装依赖

    npm i mockjs vite-plugin-mock@2.9.8 -D

  • 根目录下创建mock文件夹

    • /mock/login/index.mock.ts -- 模拟登录接口

      ts 复制代码
        export default [
              // 用户登录接口
              {
                  url: '/mock/user/login',//请求地址
                  method: 'post',//请求方式
                  response: ({ body }:any) => {
                      return {
                          "code": 200,
                          "message": "成功",
                          "data": {
                              
                              "token": "1234567890xxx",
                              "expireAt": 1720505458920,
                              "refreshToken": "12345678765xxx",
                              "userInfo": {
                                  "id": 20,
                                  "name": '小明',
                                  "phone": 15984958697
                              }
                          }
                      }
                  },
              }
          ]
    • src/index.ts

      ts 复制代码
          import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
          import login from './login/index.mock';
          const modules = {
              login
              // 其他模块...
          };
          const mockModules: any[] = []
          Object.keys(modules).forEach(async (key) => {
          if (key.includes('_')) {
              return
          }
          mockModules.push(...(modules[key] as any))
          })
      
          export function setupProdMockServer() {
          createProdMockServer(mockModules)
          }
  • vite.config.ts配置

ts 复制代码
import { defineConfig, loadEnv, UserConfig, ConfigEnv } from 'vite'
// mock插件提供的方法
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
        mockPath: './mock/',
        localEnabled: true,
        injectCode: `
          import { setupProdMockServer } from '../mock/index'

          setupProdMockServer()
          `
      }),
  ],

  server:{
    host: '0.0.0.0', // 允许IP访问
    proxy: {
         '/api': {
          target: 'http://127.0.0.1:8000',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
  }
})
相关推荐
静心问道2 小时前
XLSR-Wav2Vec2:用于语音识别的无监督跨语言表示学习
人工智能·学习·语音识别
懒惰的bit9 天前
STM32F103C8T6 学习笔记摘要(四)
笔记·stm32·学习
skyymrj9 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
zkyqss9 天前
OVS Faucet练习(下)
linux·笔记·openstack
程序猿小D9 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台
Jay_5159 天前
C++ STL 模板详解:由浅入深掌握标准模板库
c++·学习·stl
冰茶_9 天前
ASP.NET Core API文档与测试实战指南
后端·学习·http·ui·c#·asp.net
丶Darling.9 天前
深度学习与神经网络 | 邱锡鹏 | 第五章学习笔记 卷积神经网络
深度学习·神经网络·学习
浦东新村轱天乐9 天前
【麻省理工】《how to speaking》笔记
笔记
奔跑的蜗牛AZ9 天前
TiDB 字符串行转列与 JSON 数据查询优化知识笔记
笔记·json·tidb