Vue3+vite4使用mockjs进行模拟开发遇到的坑
Vue3+vite4使用mockjs进行模拟开发遇到的坑
最近没那么忙了,就想着自己写一个后台管理系统的小demo。刚好最近把Vue3的文档撸了一遍,正好可以顺便练习一下Vue3+ts。
插件
1、mockjs是必不可少的。
2、vite-plugin-mock。由于现在创建Vue3项目默认都使用vite,而不再是webpack(没有说webpack不好的意思),在vite中使用mockjs的话,是需要借助 这个插件
3、axios(用原生的也行,注意跨越问题)
npm install mockjs vite-plugin-mock axios
or
yarn add mockjs vite-plugin-mock axios
配置vite.config.ts
// vite.config.ts
import { fileURLToPath, URL } from "node:url";
import type { UserConfigExport, ConfigEnv } from "vite";import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { viteMockServe } from "vite-plugin-mock"; // 从插件中导入viteMockServe export default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),viteMockServe(), // 跟vue一样被当作函数执行,里面有一些参数可配置。这里不具体展开介绍。感兴趣的小伙伴自己去查阅资料哈],resolve: {alias: {"@": resolve(__dirname, "src"),},},css: {preprocessorOptions: {less: {modifyVars: {hack: `true; @import (reference) "${resolve("src/assets/css/global.less")}";`,},javascriptEnabled: true,},},},
});
编写接口和造假数据
在项目根目录下创建一个名为mock的文件夹,在文件夹下面创建index.ts文件
// mock/index.ts
import type { MockMethod } from "vite-plugin-mock"; // !!!看这里,这个MockMethod 是个类型,不是方法,导入的时候要type。要么就直接不导入,直接在文件中到处一个数组即可
const arr: any = [];
for (let index = 0; index < 20; index++) {arr.push({customer_name: "wade",status_text: "登录成功",os: "Windows 10",browser: "Chrome(99.0.4844.51)",ip: "192.168.9.110",created: "2021-12-14 10:41:02",location: "局域网 局域网",});
}const logList = {total: 31,page: 1,page_size: 20,list: arr,
};const statusList = {data: [{ label: "全部", value: 0 },{ label: "待审核", value: 1 },],
};export default [{url: "/api/getList",method: "post",response: () => {return logList;},},{url: "/api/getStatusList",method: "get",response: () => {return statusList;},},
] as MockMethod[];
接口调用
<template><div class="home-page"><h1>我是首页</h1><button @click="aa">按钮</button></div>
</template>
<script lang="ts" setup>
import axios from "axios";
function aa() {// 调用的时候如果报错404,请认真检查一下自己的url是否存在(我就是粗心写错了,还在网上查了半天,尴尬)axios.get("/api/getStatusList").then((res) => {console.log("login", res);});
}
</script>
<style scoped lang="less">
.home-page {width: 1200px;background-color: pink;
}
</style>
接口调用结果
到此,Vue3+Vite+ts 使用mockjs算是调通了。但是,请大家注意这里的type: import type { MockMethod } from “vite-plugin-mock”; 如果要导入这个类型,一定要加type(网上好多都没有加),不加的话项目运行的时候会报一堆node的错。
大概长这样,加了之后就能顺利运行啦!当然,也可以不使用 MockMethod 直接导出一个数组即可
// mock/index.ts
export default [{type: "get",url: "/user/login",response: () => {return { isAuth: true };},},
];
相关文章:

Vue3+vite4使用mockjs进行模拟开发遇到的坑
Vue3vite4使用mockjs进行模拟开发遇到的坑 最近没那么忙了,就想着自己写一个后台管理系统的小demo。刚好最近把Vue3的文档撸了一遍,正好可以顺便练习一下Vue3ts。 插件 1、mockjs是必不可少的。 2、vite-plugin-mock。由于现在创建Vue3项目默认都使用vit…...
一起Talk Android吧(第四百九十三回:动画知识总结)
文章目录知识回顾经验总结各位看官们大家好,上一回中咱们说的例子是"精减版动画",这一回中咱们说的例子是" 动画知识总结"。闲话休提,言归正转,让我们一起Talk Android吧!知识回顾 看官们,我们在…...

腾讯云企业网盘正式入驻数字工具箱
腾讯技术公益继腾讯电子签等入驻后,上线近半年的腾讯技术公益数字工具箱再次迎来新成员——腾讯云企业网盘,现已正式接受公益机构申请公益权益。腾讯云企业网盘(https://pan.tencent.com)是由腾讯云推出的一款安全、高效、开放的企…...
2.13练习
1、设备树设备树描述硬件信息的一种树形结构,设备树文件在linux内核启动后被内核解析。描述一个硬件设备信息的节点我们叫做设备节点,一个设备节点内部包含当前硬件的多个不同属性,相同节点不同属性是以链式结构存储2、设备树的文件格式内核顶…...

【iOS】APP IM聊天框架的设计(基于第三方SDK)
【iOS】APP IM聊天框架的设计(基于第三方SDK) 前言 在开发社交聊天类型的APP的时候,IM是必不可少的功能,而且很多公司的IM服务都是接的第三方的,很少用自研的,国内的IM厂商也都很成熟,本文所有…...

centos安装FastDFS,集成到SpringBoot中
前言 本教程采用centos7 实测 安装fastdfs,每一步都存在截图,安装不成功你就我 最关键的是采用springboot 集成 fastdfs,上传保存文件信息 小序 FastDFS是一个开源的分布式文件系统,她对文件进行管理,功能包括&…...

看透react源码之感受react的进化
写在前面 网上有许多关于react源码解读的文章,其中有很多都只是单纯贴源码,罗列变量名。其实大家都知道这个英文怎么读,直译也大概知道意思,但是这个英文在react中起到什么作用,并没有说的很通俗明白。 对于刚刚接触…...

【最优化理论】线性规划
文章目录什么是线性规划(Linear Programming,LP)?线性规划的标准形式非标准形LP模型转化为标准形LP模型基本概念基本解&基矩阵&基变量&非基变量基本可行解&可行基矩阵&非退化的基本可行解&退化的基本可行…...

数据库测试的认知和分类
数据库测试的认知和分类 目录:导读 系统测试 集成测试 单元测试 功能测试 数据库性能 性能优化分4部分 安全测试 现在的软件系统,尤其是业务应用系统,后台都连接着一个数据库。数据库中存储了大量的数据,数据库的设计是否…...

MQ中间件概念一览
一、概述 1. 大多应用中,可通过消息服务中间件来提升系统异步通信、扩展解耦能力 2. 消息服务中两个重要概念: 消息代理(message broker)和目的地(destination) 当消息发送者发送消息以后,将由…...
爱尔兰公司注册要求及条件
简介: 爱尔兰是一个高度发达的资本主义国家,也是欧盟、经济合作与发展组织、世界贸易组织和联合国的成员国。并且也是世界经济发展速度快的国家之一,因经济发达赢得了“欧洲小虎”的美誉。总体来看,爱经济发展势头趋稳,…...
Java中如何打印对象内存地址?
先看一个简单的程序,一般我们打印对象,大部分是下面的情况,可能会重写下toString()方法,这个另说 Frolan frolan new Frolan(); System.out.println(frolan);// 输出结果 com.test.admin.entity.Frolan2b80d80f这个结果其实是调…...
CF1707E Replace
题目描述 给定一个长为 nnn 的序列 a1,…,ana_1,\ldots,a_na1,…,an,其中对于任意的 iii 满足 1≤ai≤n1 \leq a_i \leq n1≤ai≤n。 定义一个二元组函数如下: f((l,r))(min{al,…,ar},max{al,…,ar})(l≤r)f((l,r))(\min\{a_l,\ldots,a_r\}…...

【Hello Linux】Linux工具介绍 (make/makefile git)
作者:小萌新 专栏:Linux 作者简介:大二学生 希望能和大家一起进步! 本篇博客简介:介绍Linux的常用工具make/makefile git Linux项目自动化构建工具 – make/Makefile 背景 会不会写Makefile 从侧面说明了一个人是否具…...

享元模式flyweight
享元模式属于结构型模式。享元模式是池技术的重要实现方式,它可以减少重复对象的创建,使用缓存来共享对象,从而降低内存的使用。细粒度的对象其状态可以分为两种:内部状态和外部状态。应用场景系统存在大量相似或相同的对象。外部…...

Pulsar
一、简介Apache Pulsar是Apache软件基金会顶级项目,是下一代云原生分布式消息流平台,集消息、存储、轻量化函数式计算为一体,采用计算与存储分离架构设计,支持多租户、持久化存储、多机房跨区域数据复制,具有强一致性、…...

项目介绍 + 定长内存池设计及实现
你好,我是安然无虞。 文章目录项目介绍当前项目做的是什么?技术栈内存池是什么?池化技术内存池内存池主要解决的问题malloc定长内存池学习目的定长内存池设计项目介绍 当前项目做的是什么? 这个项目是实现一个高并发的内存池, 它的原型是 Google 的一个开源项…...
Linux--线程安全的单例模式--自旋锁--0211
1. 线程安全的单例模式 1.1 什么是单例模式 某些类, 只应该具有一个对象(实例), 就称之为单例. 1.1.1 懒汉方式实现单例模式 以上篇博文的线程池为例 Liunx--线程池的实现--0208 09_Gosolo!的博客-CSDN博客 实现懒汉模式首先要先将构造函数私有化,…...

图文解说S参数(进阶篇)
S参数是RF工程师/SI工程师必须掌握的内容,业界已有多位大师写过关于S参数的文章,即便如此,在相关领域打滚多年的人, 可能还是会被一些问题困扰着。你懂S参数吗? 图文解说S参数(基础篇) 请继续往下看...台湾…...

Sentinel源码阅读
基础介绍 Sentinel 的使用可以分为两个部分: 核心库(Java 客户端):不依赖任何框架/库,能够运行于 Java 8 及以上的版本的运行时环境,同时对 Dubbo / Spring Cloud 等框架也有较好的支持(见 主流框架适配&…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...

Linux 文件类型,目录与路径,文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件:-(纯文本文件,二进制文件,数据格式文件) 如文本文件、图片、程序文件等。 目录文件:d(directory) 用来存放其他文件或子目录。 设备…...
进程地址空间(比特课总结)
一、进程地址空间 1. 环境变量 1 )⽤户级环境变量与系统级环境变量 全局属性:环境变量具有全局属性,会被⼦进程继承。例如当bash启动⼦进程时,环 境变量会⾃动传递给⼦进程。 本地变量限制:本地变量只在当前进程(ba…...

对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验,以及大语言模型的分析能力,我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际,我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测,聊作存档。等到明…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...

Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式,然后找到相应的网卡(可以查看自己本机的网络连接) windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置,选择刚才配置的桥接模式 静态ip设置: 我用的ubuntu24桌…...

免费数学几何作图web平台
光锐软件免费数学工具,maths,数学制图,数学作图,几何作图,几何,AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...