我有一个奇怪的问题，当我尝试使用Nginx托管我的Blazor WASM项目时，我的样式被破坏了。我试着遵循几个不同的指南，他们是相似的，对我来说也有同样的问题。
代码在这里：https://github.com/TopSwagCode/Dotnet.IdentityServer/tree/master/src/BlazorClient
当我在本地调试或在本地发布并从dotnet服务器提供服务时，我会得到以下结果：
的数据
但是当我发布并尝试使用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;
}
}
}型
我找不到任何“未找到”或类似的网络选项卡。
编辑：
当比较两个并行运行时，我无法找到线性渐变的CSS，这是菜单的紫色边。深入挖掘一下，似乎MainLayout.razor.css中的所有CSS都没有找到。
https://github.com/TopSwagCode/Dotnet.IdentityServer/blob/master/src/BlazorClient/Shared/MainLayout.razor.css的
在本地运行时：
的
使用Docker+Nginx运行时
的
在我看来，CSS不知何故丢失了？？？
编辑二：
CSS的构建散列在部署后似乎不匹配。所以我发现我的页面上链接的CSS文件如下所示：
的
但我的HTML不匹配。它看起来像这样：
型
不知道在Docker+Nginx的构建和部署过程中如何打破？我的dockerfile中有什么地方做错了吗？？？
3条答案
按热度按时间wn9m85ua1#
我以前也遇到过这个问题。删除你的bin和obj文件夹。似乎有一些缓存问题，在作用域css中生成的作用域在调试和发布之间不匹配。
rqdpfwrv2#
经过长时间的调试这个问题，我终于得到了它的工作。我发现这个项目：https://github.com/waelkdouh/DockerizedClientSideBlazor/并开始比较。我能看到的唯一不同的是，他有一个。dockerignore我做了一个副本，这一切都开始工作。不知道是什么问题。看不出列出的任何文件如何破坏CSS.....
rsl1atfo3#
通过dockerignore排除bin和obj文件夹通过 .dockerignore 排除 bin 和 obj 文件夹，应该可以解决此问题。
在.dockerignore文件中添加：
字符串
**注意：**添加此选项后，仍可能出现问题。然后，您可以尝试以下操作：
清除docker构建缓存Docker可能缓存了一些层。你可以在docker构建中添加 --no-cache 来确保没有使用缓存的图层
型
考虑浏览器缓存同时确保您的浏览器缓存已被清除（或以浏览器隐身模式打开，以确保“旧”css不在浏览器中缓存）。这很容易被忘记，然后它仍然看起来像css没有正确加载。
清除本地项目信息如果所有这些都不起作用，您还可以尝试对您的项目/解决方案进行 clean，并删除WASM项目的 obj和bin 文件夹。