我有一个奇怪的问题，当我尝试使用 Nginx 托管我的 blazor WASM 项目时，我的样式被破坏了。我尝试遵循几个不同的指南，它们很相似并且对我来说有同样的问题。
我这里有代码：https://github.com/TopSwagCode/Dotnet.IdentityServer/tree/master/src/BlazorClient
当我在本地调试或在本地发布并从 dotnetserve 提供服务时，我得到以下信息：
但是当我发布并尝试使用 Nginx 在 docker 中运行它时，我得到了这个：
我的按钮仍然在那里，但我看不到它们，因为它们是白色的。
我的 dockerfile 非常简单：
FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build-env
WORKDIR /app
COPY . ./
RUN dotnet publish -c Release -o output
FROM nginx:alpine
WORKDIR /var/www/web
COPY --from=build-env /app/output/wwwroot .
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
我的 nginx 配置
events { }
http {
include mime.types;
types {
application/wasm wasm;
}
server {
listen 80;
# Here, we set the location for Nginx to serve the files
# by looking for index.html
location / {
root /var/www/web;
try_files $uri $uri/ /index.html =404;
}
}
}
我在网络选项卡中找不到任何“未找到”或类似内容。
Edit:
当比较两者并排运行时，我无法找到线性渐变的 CSS，它是菜单的紫色一侧。深入挖掘一下，似乎没有找到 MainLayout.razor.css 中的所有 CSS。
https://github.com/TopSwagCode/Dotnet.IdentityServer/blob/master/src/BlazorClient/Shared/MainLayout.razor.css
本地运行时：
使用Docker+Nginx运行时
所以在我看来，CSS 不知何故丢失了？？？
Edit 2:
CSS 的构建哈希在部署后似乎不匹配。 所以我发现我的页面上链接的 CSS 文件如下所示：
但我的 HTML 与此不匹配。它看起来像这样：
不知道在 Docker+Nginx 的构建和部署过程中会如何中断？？？我的 dockerfile 中是否做错了什么？？？
我以前也遇到过这个问题。 删除你的 bin a obj 文件夹。 似乎存在一些缓存问题，作用域 css 中生成的作用域在调试和发布之间不匹配。