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+vite4使用mockjs进行模拟开发遇到的坑_第1张图片

到此,Vue3+Vite+ts 使用mockjs算是调通了。但是,请大家注意这里的type: import type { MockMethod } from “vite-plugin-mock”; 如果要导入这个类型,一定要加type(网上好多都没有加),不加的话项目运行的时候会报一堆node的错。

Vue3+vite4使用mockjs进行模拟开发遇到的坑_第2张图片
大概长这样,加了之后就能顺利运行啦!当然,也可以不使用 MockMethod 直接导出一个数组即可

// mock/index.ts
export default [
  {
    type: "get",
    url: "/user/login",
    response: () => {
      return { isAuth: true };
    },
  },
];

你可能感兴趣的:(vue,vue.js,javascript,前端)