Angular生产环境登录后首页空白，需多次刷新加载的问题求助

针对你遇到的生产环境首次加载main.js和runtime.js报404、需多次刷新才能正常显示的问题，可从以下几个方向排查解决：

1. 修正资源路径配置 #

Angular构建时的baseHref配置错误是这类404问题的常见原因，尤其是当生产环境部署在子路径下时：

• 直接在生产构建命令中添加--base-href参数，匹配你的生产环境部署路径，比如部署在/portal/下时：

  "prod-build": "ng build --configuration production --aot false --build-optimizer=false --base-href /portal/ && npm run post-build"
  

• 也可以在angular.json的configurations.production节点中配置固定路径：

  "configurations": {
    "production": {
      "baseHref": "/your-prod-deploy-path/",
      // 其他配置...
    }
  }
  

2. 排查post-build脚本的影响 #

由于生产和测试环境都执行了post-build脚本，需确认脚本是否在生产环境下存在资源路径篡改或文件操作错误：

• 临时注释prod-build中的&& npm run post-build部分，单独执行生产构建后部署测试，若问题消失，说明脚本存在生产环境专属的错误逻辑（比如路径替换规则错误、文件重命名失败）。
• 检查post-build脚本内容，确认是否对index.html中的资源引用路径做了错误替换，导致实际请求路径与文件存放路径不匹配。

3. 调整生产服务器的静态资源配置 #

服务器（如Nginx、Apache）的静态资源规则或缓存配置可能导致首次请求失败：

• 若使用Nginx，确保配置了正确的路由 fallback 规则，避免单页应用路由导致的资源请求错误：

  location / {
    try_files $uri $uri/ /index.html;
  }
  

• 检查服务器缓存策略，若index.html被强制缓存，会导致页面引用旧的资源文件名（已在新构建中被替换）。可在生产构建时开启文件名哈希，避免缓存冲突：

  "prod-build": "ng build --configuration production --aot false --build-optimizer=false --output-hashing all && npm run post-build"
  

4. 验证部署完整性 #

确认生产环境的部署流程没有遗漏文件或权限错误：

• 对比测试环境和生产环境的dist目录结构，确保main.js、runtime.js等文件完整上传，路径与测试环境一致。
• 检查生产服务器上这些静态文件的权限，确保服务器进程有读取文件的权限（避免因权限不足返回404）。

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