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 };},},
];