single-spa微前端场景下静态资源访问URL错误404问题求助

这个问题的核心是子应用的静态资源公共路径（publicPath）配置与实际部署路径不匹配，导致请求路径错误返回404。可按以下步骤逐一排查修复：

1. 固定部署前缀场景：修改构建工具公共路径配置 #

根据你使用的构建工具，将生产环境的publicPath配置为子应用对应的部署前缀/self-service/即可：

• Vite项目：修改vite.config.js配置

  export default defineConfig({
    base: process.env.NODE_ENV === 'production' ? '/self-service/' : '/',
    // 其余配置
  })
  

• Vue CLI项目：修改vue.config.js配置

  module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/self-service/' : '/',
    // 其余配置
  }
  

• 原生Webpack项目：修改webpack.config.js配置

  module.exports = {
    output: {
      publicPath: process.env.NODE_ENV === 'production' ? '/self-service/' : '/',
      // 其余output配置
    }
  }
  

2. 部署前缀不固定场景：运行时动态设置公共路径 #

如果子应用的部署前缀会随环境变化，可以在子应用入口文件最顶部添加运行时配置，Webpack构建的项目添加以下代码：

// 判断是否运行在single-spa微前端环境
if (window.singleSpaNavigate) {
  __webpack_public_path__ = `${window.location.origin}/self-service/`
}

Vite构建的项目可以通过动态拼接import.meta.env.BASE_URL实现相同效果。

3. 修正静态资源引入写法 #

• CSS中引用的背景图、字体等资源，不要使用/assets/xxx格式的绝对路径，改用../assets/xxx格式的相对路径，构建工具会自动拼接配置好的publicPath。
• JS/模板文件中引用资源时，优先用导入方式获取资源地址，不要硬编码路径：

  // 正确写法
  import informationSvg from './assets/information.svg'
  // 渲染时直接使用informationSvg变量即可
  

按照以上配置修改后重新构建部署子应用，静态资源请求路径就会自动匹配预期的/self-service/前缀。

内容的提问来源于stack exchange，提问作者Vyshnavi Muvvala