Azure部署Single-SPA微前端遇错误：Unexpected token '<'

这个错误的核心原因是加载子应用的JS资源时，服务器返回了HTML内容（通常是404页面或首页），而非预期的JavaScript代码，导致解析失败。以下是针对性的排查和解决步骤：

1. 修正Webpack的publicPath配置 #

本地开发时资源路径默认是根目录，但部署到Azure后可能有特定的基础路径（比如/my-org/），需要在webpack配置中明确设置publicPath，确保资源加载路径正确：

return webpackMerge.merge(defaultConfig, {
  output: {
    // 根据环境切换publicPath：本地用根路径，线上用部署的基础路径
    publicPath: webpackConfigEnv.isLocal ? "/" : "/my-org/"
  },
  // 原有的devServer、plugins等配置...
});

2. 验证子应用的注册URL #

检查root config中注册子应用的appUrl是否指向Azure上的正确地址，而非本地的localhost：

• 本地开发时可以用http://localhost:4203这类地址
• 部署后要替换为子应用在Azure上的实际部署URL，比如https://your-azure-domain/my-org-header/main.js
• 可以通过isLocal模板参数在index.ejs中动态切换：

  <script>
    singleSpa.registerApplication({
      name: "@my-org/my-org-header",
      app: () => System.import(<%= isLocal ? '"@my-org/my-org-header"' : '"https://your-azure-url/my-org-header/main.js"' %>),
      activeWhen: ["/"]
    });
  </script>
  

3. 配置Azure静态网站的路由规则 #

因为Single-SPA是单页应用，需要Azure支持historyApiFallback：

• 在Azure静态网站配置中，将默认文档和错误文档都设置为index.html
• 这样当访问深层路由或资源路径不存在时，服务器会返回首页而非404 HTML，避免资源加载解析错误

4. 移除本地开发的Proxy配置（线上无效） #

当前webpack config中的devServer.proxy仅用于本地开发时转发请求，部署到Azure后这些配置不会生效：

• 线上环境如果需要跨域或路径转发，要通过Azure的路由规则或反向代理实现
• 确保子应用部署路径与root config中的请求路径匹配，不需要依赖本地proxy

5. 检查部署文件完整性 #

确认Azure上部署的文件包含webpack打包生成的所有chunk文件（包括main.js、vendor chunk等），没有遗漏或路径错误。可以通过Azure门户查看部署的文件列表，对比本地打包后的输出目录。

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