Blazor FluentUI升级后_content文件未更新，JSInterop报错如何解决？

1. 启用.NET 8静态资源版本化 #

在Program.cs中配置静态资源自动版本化，框架会为资源添加内容哈希后缀，文件更新时URL自动变化，强制浏览器加载新文件：

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddStaticAssetsVersioning();

该配置会自动处理_content目录下的FluentUI组件JS文件，从根源避免缓存不一致问题。

2. 自定义静态资源缓存策略 #

如果版本化仍有问题，可在Program.cs中针对FluentUI的JS文件设置精准缓存规则：

app.UseStaticFiles(new StaticFileOptions
{
    OnPrepareResponse = ctx =>
    {
        if (ctx.File.Name.EndsWith(".razor.js") && ctx.File.PhysicalPath.Contains("_content/Microsoft.FluentUI.AspNetCore.Components"))
        {
            // 生产环境建议设置短有效期+协商缓存，平衡性能与更新速度
            ctx.Context.Response.Headers.CacheControl = "public, max-age=3600, must-revalidate";
        }
    }
});

3. 针对特定组件强制刷新JS #

若个别组件的JS缓存顽固，可在组件代码中手动加载带版本参数的JS文件：

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var jsPath = "_content/Microsoft.FluentUI.AspNetCore.Components/FluentTextField.razor.js";
            // 添加时间戳参数绕过缓存
            var versionedPath = $"{jsPath}?v={DateTime.UtcNow.Ticks}";
            await JS.InvokeVoidAsync("import", versionedPath);
        }
    }
}

4. Azure Web App端配置 #

发布到Azure后，在门户配置 > 应用程序设置中添加全局静态资源缓存规则：

• 键：WEBSITE_STATIC_CACHE_CONTROL
• 值：public, max-age=3600, must-revalidate
  覆盖Azure默认的静态资源缓存策略，确保云端资源及时更新。

5. 开发环境禁用缓存 #

调试阶段可在launchSettings.json中添加配置，避免手动刷新：

"profiles": {
  "YourAppName": {
    "commandName": "Project",
    "launchBrowser": true,
    "environmentVariables": {
      "ASPNETCORE_ENVIRONMENT": "Development",
      "ASPNETCORE_BLAZOR_DISABLE_CACHING": "true"
    }
  }
}

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