vite-plugin-mock2.9.8版本 生产环境访问url为404或延迟执行访问返回的是html的情况，未拿到mock接口数据，如何解决 #153
Description
依赖版本：
"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方式查看）：
延迟执行状态码为200或304的，响应内容也不是mock接口数据，而是主界面的html：
