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/, '')
        }
      }
  }
})
相关推荐
PerfumerKarma22 分钟前
【WebGPU学习杂记】数学基础拾遗(2)变换矩阵中的齐次坐标推导与几何理解
学习·线性代数·矩阵
knight_202434 分钟前
嵌入式学习日志————对射式红外传感器计次
stm32·单片机·嵌入式硬件·学习
go54631584651 小时前
基于分组规则的Excel数据分组优化系统设计与实现
人工智能·学习·生成对抗网络·数学建模·语音识别
##echo1 小时前
嵌入式Linux裸机开发笔记9(IMX6ULL)GPIO 中断实验(1)
linux·c语言·笔记·单片机·嵌入式硬件
●VON1 小时前
重生之我在暑假学习微服务第二天《MybatisPlus-下篇》
java·学习·微服务·架构·mybatis-plus
Yu_Lijing1 小时前
MySQL进阶学习与初阶复习第四天
数据库·学习·mysql
好学且牛逼的马3 小时前
学习随笔录
学习
我爱学嵌入式4 小时前
C语言第 9 天学习笔记:数组(二维数组与字符数组)
c语言·笔记·学习
im_AMBER7 小时前
学习日志19 python
python·学习
_Kayo_11 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习