vue项目生产环境中使用mock数据（mockjs和vite-plugin-mock）

vue项目生产环境中如何使用mockjs和vite-plugin-mock插件形成数据，下面web建站小编给大家详细介绍一下！

安装脚手架

npm install mockjs vite-plugin-mock -D

mock项目目录结构，根据结构创建相应文件

mock-prod(项目名称)
├─ index.html
├─ package.json
├─ public
│  └─ vite.svg
├─ README.md
├─ src
│  ├─ api
│  │  └─ index.js
│  ├─ App.vue
│  ├─ assets
│  │  └─ vue.svg
│  ├─ components
│  │  └─ Mock.vue
│  ├─ main.js
│  ├─ mock
│  │  └─ index.js
│  ├─ mockProdServer.js
│  ├─ style.css
│  └─ utils
│     └─ request.js
├─ vite.config.js
└─ yarn.lock

在vite.config.js文件中引入vite-plugin-mock插件

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

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,//是否在控制台显示请求日志
    }),
  ],
});

新建src/mock/index.js文件

export default [
  {
    url: "/api/test",
    method: "get",
    response: () => {
      return {
        code: 200,
        msg: "success",
        "data|6": ["@integer(0, 1000)"],
      };
    },
  },
];

创建src/api/index.js 文件管理接口

import request from "../utils/request";
export function getTest() {
  return request({
    url: "/api/test",
    method: "get",
  });
}

生产环境下使用mock

/* src/mockProdServer.js */

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

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