Azure静态web应用程序未正确加载页面资源.css或javascript文件



更新3

对不起,我把这个更新放在这里了,但我发现了一个好消息。阅读以下标题下的原始问题,回顾我所做的。

在下面的所有相关内容之后,我意识到缓存发生了一些事情。然而,我也注意到,在不同的计算机上,错误仍然存在。在玩了一遍url之后,我发现这个

https://yellow-hill-0ce1f0e10-4.centralus.azurestaticapps.net/contacto

还有这个

https://yellow-hill-0ce1f0e10-4.centralus.azurestaticapps.net/contacto/

加载不同的网站。唯一的区别是后面的斜线。

当我从Visual Studio代码在本地运行此程序时,本地服务器会自动添加斜杠;Azure静态web应用程序,不是

原始问题

我正在制作一个基于azure静态web应用程序的简单网站。我用过这个指南https://marketplace.visualstudio.com/items?itemName=ms-azuretols.vscode-azurestaticwebapps.

我想创建一个新页面,所以我把需要的文件复制到一个新的contacto文件夹中。并做出所有的改变。然后成功部署。

然而,部署的文件不是我修改的文件,而是原始文件,就好像没有检测到任何更改(如果需要检测更改(。例如。我在github 中有这个styles.css文件

body {
font-family: ff-dagny-web-pro, sans-serif;
font-weight: 300;
font-style: normal;
}
.nopadding {
padding: 0 !important;
}
.btn-primary {
color: #383835;
background-color: #ffd225;
border-color: #ffd225;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
color: #383835;
background-color: #ffd225;
border-color: #ffd225;
/*set the color you want here*/
}

ul.nav li a, ul.nav li a:visited {
color: #3C3C3A !important;
}
ul.nav li a:hover, ul.nav li a:active {
color: #3C3C3A !important;
}
ul.nav li.active a {
color: #3C3C3A !important;
}
.hide{
display:none;
}

但当我加载发布网站时,文件会有很大的不同。正如你所看到的。

body {
font-family: ff-dagny-web-pro, sans-serif;
font-weight: 300;
font-style: normal;
}
.table td, .table th {
vertical-align: middle;
}
.table {
margin: 0;
}
.table tr td img {
width: 100%;
}
.table tr td {
border: none;
}
.nopadding {
padding: 0 !important;
}
.geoGradient {
background: rgb(206, 217, 183);
background: linear-gradient(141deg, rgba(206, 217, 183, 1) 0%, rgba(185, 202, 150, 1) 100%);
}
ul.nav li a, ul.nav li a:visited {
color: #3C3C3A !important;
}
ul.nav li a:hover, ul.nav li a:active {
color: #3C3C3A !important;
}
ul.nav li.active a {
color: #3C3C3A !important;
}

几周前,当我更新内部页面中的图像时,我也遇到了类似的情况,在浏览已发布的网站时,没有加载任何图像,github在存储库和操作中显示了正确的文件,但它们似乎不在服务器中。我更改了所有文件的名称,这就解决了问题。听起来很可笑。我试图更改文件夹名称,但无法在此工作。

我缺少什么?如何让github操作来部署提交中的文件?

更新1

由于YML文件和这个问题无关,我删除了它。

更新2

这个更新不相关,所以我删除了,所以现在问题更清楚了。

最初认为github没有部署一些文件(包括一些图像文件(的问题与github无关,而是与Azure静态应用程序已知的问题有关。

事实证明,azure静态web应用程序服务器在指向文件夹时,在url的末尾不包括斜杠。

出现这个问题的原因是,如果没有尾部斜杠,html文件中的所有相对引用都不在当前文件夹中,而是在父文件夹中。

www.contoso.com/contact

指向contact文件夹中的index.html文件,但该文件中的所有相对引用都指向根级别。

www.contoso.com/contact/ (see the slash) 

指向contact文件夹中的index.html文件,该文件中的所有相关引用都能正常工作。

有一个问题值得在azure静态网络应用github中投票https://github.com/Azure/static-web-apps/issues/42

解决方案现在您有两个解决方案:

  1. 确保所有指向内部页面的链接都有尾部斜杠

在我的情况下,当图像出现问题时,更改名称并不是解决方案。不知怎的,无意中,我在链接中加入了尾随斜杠。

  1. 在所有资源引用中使用绝对URL。即使在访问者键入url却忘记键入尾部斜杠的情况下,这种方法也有效

更新最终解决方案不久前,Microsoft为此问题部署了一个解决方案。他们在staticwebapp.config.json文件中添加了使用trailingSlash配置配置尾部斜杠行为的功能。

有关更多详细信息,请参阅本文档。https://learn.microsoft.com/azure/static-web-apps/configuration#trailing-斜线

问题描述

放在VS的wwwroot文件夹中的文件,在本地开发中运行良好。但当发布到Azure时,找不到对重定向到Blazor页面的文件的访问。

解决方案

检查你的文件.csproj文件。如果您发现以下任何代码,请将其删除。

<ItemGroup>
<Content Update="wwwrootdataRandomFile.xml">
<CopyToOutputDirectory>Never</CopyToOutputDirectory>
</Content>
</ItemGroup>

为什么

当通过Visual Studio将文件添加到wwwroot时,它有时会自动为该文件添加元数据。对于要从Github工作流上传到Azure的文件,.csproj文件中不应提及该文件。

最新更新