ice.js微前端子应用中vite-plugin-mock数据请求问题解析

在基于ice.js框架的微前端架构实践中，开发者使用vite-plugin-mock插件为子应用配置mock数据时遇到了一个典型问题：当子应用独立运行时mock数据正常返回，但集成到主应用后mock接口失效。本文将深入分析问题原因并提供解决方案。

问题现象

开发者在ice.js 3.0版本中创建了一个Vue技术栈的子应用，使用vite-plugin-mock插件模拟后端接口数据。子应用单独运行时（端口3002），mock数据能够正常返回。但当该子应用被集成到主应用（端口3333）后，mock接口请求却无法获取预期数据。

问题根源分析

通过现象观察可以发现，关键差异在于请求的端口变化：

1. 子应用独立运行时：请求发送到子应用服务端口（3002）
2. 集成到主应用后：请求被发送到主应用端口（3333）

这种端口变化导致mock服务失效的根本原因在于：

1. 请求路径处理机制：vite-plugin-mock默认会拦截当前服务端口下的特定路径请求
2. 微前端代理特性：主应用作为微前端入口，会代理所有子应用的请求
3. 路径重定向：主应用未正确将mock请求转发到子应用服务

解决方案

方案一：配置请求基础路径

在子应用代码中，为所有mock请求添加明确的基础路径：

// 在axios实例或请求配置中添加baseURL
const service = axios.create({
  baseURL: process.env.NODE_ENV === 'development' 
    ? 'http://localhost:3002' 
    : '/sub-app-path'
})

方案二：修改vite-plugin-mock配置

调整vite.config.js中的mock插件配置，确保能处理跨端口请求：

import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
    viteMockServe({
      mockPath: 'mock',
      localEnabled: true,
      // 添加以下配置确保能处理代理请求
      prodEnabled: false,
      injectCode: `
        import { setupProdMockServer } from '../mockProdServer';
        setupProdMockServer();
      `,
    })
  ]
})

方案三：主应用代理配置

在主应用的开发服务器配置中添加mock路径代理：

// 主应用vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/mock-userList': {
        target: 'http://localhost:3002',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/mock-userList/, '/mock-userList')
      }
    }
  }
})

最佳实践建议

1. 环境区分：开发环境使用明确的baseURL，生产环境使用相对路径
2. 命名规范：为所有mock接口添加统一前缀（如/mock-api/）
3. 文档记录：在团队文档中明确mock服务的使用规范和注意事项
4. 接口监控：添加拦截器日志，便于调试和问题排查

总结

在ice.js微前端架构中处理mock数据请求时，开发者需要特别注意请求路径的完整性和服务端口的一致性。通过合理配置请求基础路径、mock插件参数以及主应用代理规则，可以确保mock服务在微前端环境下正常工作。这不仅能提高开发效率，也能为后续的联调测试打下良好基础。