需要对 Blazor WebAssembly 站点中的 CSS 文件进行缓存清除

Answer 1

在开发过程中，我使用了这个 javascript 解决方法。 我应该将其删除并替换为您用于生产的原始标记，特别是当您可能试图在 WebAssembly 应用程序中避免使用 JavaScript 时。

let dt=new Date();
const lnk=document.createElement('link');
lnk.setAttribute('href','css/app.min.css?u='+dt.getTime());
lnk.setAttribute('rel','stylesheet');
document.getElementByTagName('head')[0].appandChild('lnk');

CSS 文件上的唯一查询字符串强制浏览器获取新副本，但应用程序只是忽略额外的数据。

Answer 2

更好的答案可能是，在 Web 程序集中添加 css 标签：

<link href="css/@(myawesomeappcss)" rel="stylesheet"/>
<link href="css/@(myawesomeclientcss)" rel="stylesheet"/>

然后使用以下内容：

@code
{
  private string myawesomeappcss = "app.min.css?u=";
  private string myawesomeclientcss = "client.min.css?u=";

  protected override async Task OnInitializedAsync()
  {
    DateTime dt= DateTime.Now;
    myawesomeappcss += ((DateTimeOffset)dt).ToUnixTimeSeconds();
    dt = dt.AddMilliseconds(1);
    myawesomeclientcss += ((DateTimeOffset)dt).ToUnixTimeSeconds();
  }
}

尽管如此，在发布之前删除 JavaScript 版本会更容易。

Answer 3

如果有人遇到这个问题：

在 .NET 9 中现在有一个内置功能：

ASP.NET Core 9.0 静态资产交付优化的新增功能

另请参阅：ASP.NET Core Blazor 静态文件 服务器端 Blazor 应用程序中的静态资产交付

这也适用于 WASM。

简短版本：

添加资产

<link rel="stylesheet" href="@Assets["bootstrap/bootstrap.min.css"]" />
<link rel="stylesheet" href="@Assets["app.css"]" />
<link rel="stylesheet" href="@Assets["BlazorSample.styles.css"]" />

更换中间件：

+app.MapStaticAssets();
-app.UseStaticFiles();