vite-plugin-mock 使用

项目现在属于demo阶段，需要自己模拟数据，所以使用vite-plugin-mock ，在本地调试没得问题，但是在线上环境遇到请求无效或者405
安装

pnpm install vite-plugin-mock -D

在根目录下新建mock文件夹
注意点：请求的路径不要重名或者开始文件名一致,像下面的 /api/user 和 /api/user/menus;发现在请求接口api/user/menus 的时候，请求到的是api/user 的接口，修改成api/menus 后能正常请求(或许个例)

import { MockMethod } from "vite-plugin-mock";
import { menus, users } from "./data";
interface temHeader {
  headers: any;
}
export default [
  {
    url: "/api/user",
    method: "get",
    response: (temHeader: temHeader) => {
   		.....
    },
  },
  {
    url: "/api/menus",
    method: "get",
    response: (temHeader: temHeader) => {
  		....
    },
  },
] as MockMethod[];

页面中使用

import { $http } from "@hooks/http";
 $http.get("/user", values).then(res => {
      const { result, data } = res;
  });

vite中配置

import { viteMockServe } from 'vite-plugin-mock'；
export default defineConfig(({ command, mode }) => {
  return {
      plugins: [
          viteMockServe({
            mockPath: "mocks", // 你的mock文件地址
            localEnabled: command === "serve", // 开发环境
            prodEnabled: command !== "serve", // 生产环境 //  这样可以控制关闭mock的时候不让mock打包到最终代码内
            // 如果prodEnable设置为true，则在编译打包的时候，会把mock的文件打包进去，如果你不写injectFile，那就是默认注入到main.ts/main.js
            injectCode: `
             // 这个路径需要注意是在你要注入的文件下的引用路径
              import { setupProdMockServer } from './utils/mockProdServer';
              setupProdMockServer();
            `,
            // 在全局中注入代码,不配置的话默认是在src/main.js/main.ts
            injectFile: resolve("src/main.tsx"),
          }), 
         ]
     }
 })

若是在生产环境中使用，需要新建一个mockProdServer.ts,本项目是新建在utils的文件夹内

import { createProdMockServer } from "vite-plugin-mock/es/createProdMockServer";
import MockMethod2 from "../../mocks/login"; // mock接口定义的地址
import MockMethod from "../../mocks/user/index";
export const mockModules = [...MockMethod, ...MockMethod2]
export function setupProdMockServer() {
  createProdMockServer(mockModules);
}

遇到的一个问题，就是在window环境下，本地打包后，在打包的文件中找不到createProdMockServer 的函数，但是在jekins上直接编译，却可以在编译后的文件中查询到对应的函数方法
所以要查看是否生效就是在mian.js 中引入下（上线记得移除吧）

import {setupProdMockServer} from './utils/mockProdServer';
// production mock server
 if (process.env.NODE_ENV === 'production') {
   setupProdMockServer();
 }