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/, '')
        }
      }
  }
})
相关推荐
励志不掉头发的内向程序员12 分钟前
C++进阶——多态
开发语言·c++·学习
西猫雷婶1 小时前
scikit-learn/sklearn学习|广义线性回归损失函数的基本表达式
深度学习·神经网络·学习·机器学习·线性回归·scikit-learn·概率论
Lynnxiaowen2 小时前
今天继续学习shell脚本
linux·运维·学习·云计算·bash
落羽的落羽2 小时前
【C++】C++11的包装器:function与bind简介
c++·学习
sucool_lb3 小时前
GEM5学习(5): ARM 架构功耗仿真
arm开发·学习
尚久龙3 小时前
安卓学习 之 图片控件和图片按钮
android·java·学习·手机·android studio·安卓
守.护3 小时前
云计算学习笔记——HTTP服务、NFS服务篇
笔记·学习·云计算
wdfk_prog3 小时前
[Linux]学习笔记系列 -- lib/dump_stack.c 栈回溯打印(Stack Trace Dumping) 内核调试与错误诊断的基石
linux·运维·服务器·c语言·笔记·学习
i.ajls3 小时前
无监督学习,推荐系统以及强化学习笔记
笔记·学习·机器学习
dragoooon343 小时前
[优选算法专题二滑动窗口——串联所有单词的子串]
数据结构·c++·学习·算法·leetcode·学习方法