Ionic/Angular 18应用本地正常，部署后仅显示背景求助

问题概述 #

基于Angular 18开发的Ionic应用，ng serve或ionic serve本地运行完全正常，但以下场景仅显示背景，页面内容空白：

• 本地构建生成的www文件夹直接打开index.html
• 推送至Git部署到Azure静态Web应用
• 使用Capacitor打包APK

已尝试修改base路径、切换构建类型，未解决问题，当前angular.json配置如下：

{
  "projects": {
    "app": {
      "projectType": "application",
      "schematics": {
        "@ionic/angular-toolkit:page": {
          "styleext": "scss",
          "standalone": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              "src/manifest.webmanifest",
              "src/manifest.webmanifest"
            ],
            "styles": ["src/global.scss", "src/theme/variables.scss"],
            "scripts": [],
            "serviceWorker": true,
            "ngswConfigPath": "ngsw-config.json",
            "optimization": { "styles": { "inlineCritical": false } }
          },
          "configurations": {
            "production": {
              "serviceWorker": false,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "8kb",
                  "maximumError": "5mb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },
            "ci": {
              "progress": false
            }
          },
          "defaultConfiguration": "production"
        }
      }
    }
  }
}

排查与解决方案 #

1. 修复angular.json配置矛盾 #

• ServiceWorker配置冲突：全局build options中开启了serviceWorker并指定了配置文件，但production配置又将其关闭，这种不一致会导致资源加载异常。二选一调整：
  • 不需要Service Worker：直接移除全局options里的serviceWorker和ngswConfigPath项；
  • 需要Service Worker：将production配置中的serviceWorker设为true，并确保ngsw-config.json路径正确。
• 重复Assets项：assets数组里重复添加了src/manifest.webmanifest，删除其中一个，避免构建时重复处理引发异常。

2. 校验Base Href设置 #

• 本地打开www文件夹时，由于使用文件协议，将index.html中的<base href="/">临时改为<base href="./">测试；
• 部署到Azure静态Web应用的子路径时，修改为对应路径，比如<base href="/your-app-path/">；
• 也可通过构建命令指定：ng build --base-href ./ 或 ionic build --base-href ./。

3. 适配路由模式 #

• 若使用Path路由（useHash: false），Azure静态Web应用需添加staticwebapp.config.json配置fallback规则：

  {
    "navigationFallback": {
      "rewrite": "/index.html",
      "exclude": ["*.{css,js,png,jpg,gif,ico}", "assets/*"]
    }
  }
  

• 本地文件协议下，Hash路由兼容性更好，可临时切换为useHash: true验证是否解决空白问题。

4. 排查构建后错误 #

打开浏览器开发者工具（F12），查看控制台和网络标签：

• 网络标签：检查是否有资源加载404错误，确认js、css等文件路径是否正确；
• 控制台标签：查看是否有未捕获的JS异常，比如生产环境下依赖未正确打包、环境变量配置错误等。

5. Capacitor打包额外检查 #

• 运行npx cap sync同步最新构建的www文件夹到原生项目；
• 确认capacitor.config.ts中的webDir设置为"www"；
• 先确保www文件夹本地打开正常，再执行打包APK操作。

6. 简化构建配置测试 #

先用最基础的生产构建命令测试，逐步添加优化配置定位问题：

ng build --configuration production --service-worker false --base-href ./

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