Angular 14部署IIS 10首次访问空白刷新正常问题排查求助

可能原因及解决步骤 #

1. Base-Href配置修正 #

• 执行构建命令时，--base-href的格式需与IIS虚拟目录匹配，正确格式应为前后带斜杠的/TestSite/，而非仅"TestSite"。
• 修正构建命令：

  ng build --base-href "/TestSite/"
  

• 重新构建项目后，将新生成的dist文件夹内容部署到IIS服务器。

2. Web.config重写路径调整 #

• 当前web.config中重写动作的url为./index.html，在虚拟目录场景下可能无法准确定位文件，需修改为对应虚拟目录的路径：

  <action type="Rewrite" url="/TestSite/index.html" />
  

  或简化为相对根目录的路径：

  <action type="Rewrite" url="index.html" />
  

3. IIS站点基础配置验证 #

• 确认IIS中创建的虚拟目录名称为TestSite，物理路径指向部署的dist文件夹。
• 检查站点默认文档设置，确保index.html已添加并排在首位：
  • 打开IIS站点的「默认文档」配置
  • 添加index.html并移至列表顶部

4. 缓存问题处理 #

• 首次访问时浏览器可能缓存旧资源，可通过Ctrl+Shift+R强制清除缓存后测试。
• 为避免后续缓存问题，修改angular.json开启资源哈希：

  "architect": {
    "build": {
      "options": {
        "outputHashing": "all"
      }
    }
  }
  

5. 控制台错误排查 #

• 首次访问空白页面时，按F12打开浏览器开发者工具，切换到「控制台」标签，查看是否存在404资源加载失败或JS语法报错，根据错误信息定位具体问题。

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