vite-plugin-mock icon indicating copy to clipboard operation
vite-plugin-mock copied to clipboard

vite-plugin-mock2.9.8版本 生产环境访问url为404或延迟执行访问返回的是html的情况,未拿到mock接口数据,如何解决

Open NotNullPointer opened this issue 1 month ago • 0 comments

依赖版本:

"devDependencies": {
  "vite-plugin-mock": "2.9.8",
  "mockjs": "^1.1.0",
}

mock接口定义:

import { MockMethod } from 'vite-plugin-mock';
import Mock from 'mockjs';
export default [
{
    url: '/api/user/login',
    method: 'post',
    response: ({ body }) => {
      const { username, password } = body;

      // 简单的身份验证逻辑
      if (username === 'admin' && password === '123456') {
        return {
          code: 200,
          message: '登录成功',
          data: {
            token: 'fake_token_123456', // 模拟 JWT token
            userInfo: {
              id: 1,
              username: 'admin',
              nickname: '管理员',
              avatar: 'https://avatars.githubusercontent.com/u/123456'
            }
          }
        };
      } else {
        return {
          code: 401,
          message: '用户名或密码错误',
          data: null
        };
      }
    }
  },
{
    url: '/api/products',
    method: 'get',
    response: () => {
      // 使用 mockjs 生成模拟的商品数据
      const products = Mock.mock({
        'list|10-20': [{
          'id|+1': 1,
          'name': '@cword(2,5)',
          'price|10-200.2': 1,
          'stock|0-1000': 100,
          'description': '@cparagraph(1)',
          'category|1': ['食品', '数码', '家居', '服装', '图书', '运动', '美妆', '母婴'],
          'brand|1': ['苹果', '华为', '小米', '耐克', '阿迪达斯', '优衣库', '索尼', '三星'],
          'sales|0-10000': 0,
          'rating|3-5.1': 1,
          'publishDate': '@datetime'
        }]
      }).list;

      console.log("/api/products被拦截了@@@");
      return {
        code: 200,
        message: '获取商品列表成功',
        data: {
          list: products
        }
      };
    }
  }
] as MockMethod[];

mock-prod-server.ts文件:

// 文件路径: src/mockProdServer.ts
import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';

interface MockData {
  url: string;
  method: string;
  response: () => Record<string, any>;
}

const mockModules = import.meta.glob<Record<string, { default: MockData[] }>>(
  './../mock/*.mock.{ts,js}',
  { eager: true }
);

// 打印正常
console.log('mockModules====>', mockModules);

const mockData: MockData[] = [];
Object.keys(mockModules).forEach(key => {
  if (!key.includes('mockProdServer')) {
    const module = mockModules[key];
    if (module && module.default) {
      mockData.push(...(module.default as unknown as MockData[]));
    }
  }
});


export function setupProdMockServer() {
  console.log('生产环境mockData==>', mockData);
  createProdMockServer(mockData);
  // 延迟一段时间执行,执行后的状态码200或者304,但响应内容是主界面的html,而不是期待的mock接口响应数据
  setTimeout(() => {
    const healthCheck = fetch('/api/products', { method: 'GET' }).then(res => {
        console.log('[Mock] 健康检查请求状态:', res.json());
        return res.json();
      }
    );
    console.log('[Mock] 健康检查请求结果:', healthCheck);
  }, 5000);
}

入口文件(src/main.ts)内容是:

if (__VITE_WORK_ENV__ === 'prd' && __VITE_MOCK_ENABLED__) {
  console.log('当前是生产环境且启用了mock服务,准备加载mock服务...');
  // 动态导入生产环境mock服务
  import('./mock-prod-server').then((module) => {
    module.setupProdMockServer();
  });
}

vite.config.ts文件mock配置内容:

viteMockServe({
        // mock 文件目录
        mockPath: 'mock',
        // 开发环境启用 mock 服务
        localEnabled: command === 'serve' && enableMock,
        // 生产环境启用mock服务
        prodEnabled: command === 'build' && enableMock,
        // injectFile: path.resolve(__dirname, 'src/main.ts'),
        // 监听 mock 文件变化并实时更新mock接口数据,特别是频繁调整mock数据时,无需重启服务器
        watchFiles: true,
        // 是否在控制台显示请求日志
        logger: true
      })

打完生产包(或非开发环境包)后访问界面(或使用vite preview方式查看):

Image Image

延迟执行状态码为200或304的,响应内容也不是mock接口数据,而是主界面的html:
Image

NotNullPointer avatar Dec 02 '25 17:12 NotNullPointer