vue3+vite 使用mock.js

安装mock.js

经测试发现vite-plugin-mock版本太新与vite@4版本不兼容，最好使用2.9.6版本

#npm
npm install mockjs vite-plugin-mock -D

npm install mockjs vite-plugin-mock@2.9.6-D

#yarn
yarn add mockjs vite-plugin-mock -D

yarn add mockjs vite-plugin-mock@2.9.6 -D

vite中mock引入

安装后，需要在vite.config.js文件中引入vite-plugin-mock插件

/*
  vite.config.js
*/

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { viteMockServe } from "vite-plugin-mock";

// https://vitejs.dev/config/
export default defineConfig({
    base: '/',
    plugins: [
        vue(),
        viteMockServe({
            mockPath: "src/mock",//设置mock文件存储目录
            localEnabled: true,//设置是否启用本地mock文件
            prodEnabled: true,//设置打包是否启用 mock 功能
            watchFiles: true,//设置是否监视mockPath对应的文件夹内文件中的更改
            injectCode: `
              import { setupProdMockServer } from './mockProdServer';
              setupProdMockServer();
            `,//如果生产环境开启了 mock 功能,即prodEnabled=true.则该代码会被注入到injectFile对应的文件的底部。默认为main.{ts,js}
            logger: true,//是否在控制台显示请求日志
        }),
    ],
});

创建mock文件夹

src/mock/user.ts (这里以用户登录接口为例)

//createUserList:次函数执行会返回一个数组
function createUserList() {
  return [
    {
      userId: 1,
      username: "admin",
      password: "123456",
      token: "ZHESHICESHITOKEN",
    }
  ]
}
export default [
  {
    url: "/api/user/login", 
    method: "post", 
    response: ({ body }: { body: any }) => {
      //获取请求体携带过来的用户名与密码
      const { username, password } = body;
      //调用获取用户信息函数,用于判断是否有此用户
      const checkUser = createUserList().find(
        (item) => item.username === username && item.password === password
      );
      //没有用户返回失败信息
      if (!checkUser) {
        return { code: 201, data: { message: "账号或者密码不正确" } };
      }
      //如果有返回成功信息
      const { token } = checkUser;
      return { code: 200, data: { token } };
    },
  }
]

创建api文件夹

在src/api文件夹下创建相应的api接口请求函数，进行统一管理。

/* 
  src/api/index.js 
*/

import request from "../utils/request";
export function getTest() {
    return request({
        url: "/api/user/login",
        method: "post",
        params:{data}
    });
}

生产环境下使用mock

创建一个js文件mockProdServer.js，位置和main.js同层，在src/mockProdServer.js。

/* 
  src/mockProdServer.js 
*/
import { createProdMockServer } from "vite-plugin-mock/es/createProdMockServer";
//这里可以把 mock 文件夹下的所有文件都引入
import homeModule from "./mock/index";

export function setupProdMockServer() {
    createProdMockServer([...homeModule]);
}

注意

如果你发现生产环境下无法请求mock接口，原因很有可能是因为你是在onMounted或者onBeforeMount这两个生命周期中请求的。因为vite-plugin-mock插件中用来处理生产环境的函数createProdMockServer还未执行完成，所以无法拦截请求。你的请求会直接发出去，无法通过mock返回数据。

解决方案：①直接在main.js中注入插件配置。（在插件引入中，injectCode字段内的代码）；②在onMounted生命周期中使用setTimeout函数执行请求函数