Angular部署Azure App Service后UI缓存问题求助

核心排查方向：Azure层面的缓存配置 #

你遇到的问题大概率是Azure App Service本身的静态文件缓存策略在生效，而非前端本地缓存。以下是具体修复步骤：

1. 配置web.config的静态文件缓存规则（针对Windows App Service） #

在Angular项目的src目录下创建web.config文件，添加如下规则，强制静态资源（JS/CSS/图片等）使用严格的缓存失效策略，同时对index.html禁用缓存：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="00:00:00" />
      <remove fileExtension=".js" />
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <remove fileExtension=".css" />
      <mimeMap fileExtension=".css" mimeType="text/css" />
    </staticContent>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
    <httpProtocol>
      <customHeaders>
        <add name="Cache-Control" value="no-cache, no-store, must-revalidate" />
        <add name="Pragma" value="no-cache" />
        <add name="Expires" value="0" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

注意：创建后要确保angular.json的assets配置包含web.config，这样构建时会自动复制到dist目录。

2. 调整Azure App Service的缓存相关应用设置 #

• 进入Azure门户的App Service资源，找到配置 > 应用程序设置
• 添加以下两项设置：
  • WEBSITE_DYNAMIC_CACHE：设为0（禁用动态页面缓存）
  • WEBSITE_STATIC_CACHE：设为0（禁用静态文件缓存，若需短时效缓存可设为00:10:00这类值）

3. 确认构建与发布流程有效性 #

你的构建命令ng build --prod --aot --outputHashing=all是正确的，其中--prod已包含--aot，可简化为ng build --prod --outputHashing=all。发布时注意：

• 本地构建完成后，将dist目录下所有文件完整上传到Azure App Service的site/wwwroot目录
• 优先使用本地构建后上传产物的方式，避免通过Kudu自动构建（本地构建环境更可控）

4. 清理Azure层面的缓存并重启服务 #

• 进入App Service的高级工具 > Kudu，打开CMD控制台
• 执行命令del "%ProgramFiles(x86)%\SiteExtensions\Kudu\App_Data\Temp\DeploymentCache\*" /f /s清理部署缓存
• 回到App Service概述页，点击"重启"按钮重启服务

验证步骤 #

发布完成后，打开浏览器开发者工具（F12）：

• 切换到"网络"标签，刷新页面，查看index.html和静态资源的Cache-Control响应头是否为no-cache, no-store, must-revalidate
• 检查静态资源文件名是否包含哈希值（比如main.abc123.js），确认outputHashing配置生效

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