Azure 静态 Web 应用未正确加载页面资源。 css 或 javascript 文件

Question

更新 3

对不起，我把这个更新放在这里，但我发现了一个很好的发现。阅读下面标题为 Original Qestion 的下方，查看我所做的工作。

在下面的所有相关内容之后，我意识到缓存发生了一些事情。但是，我也注意到在不同的计算机上错误仍然存​​在。在玩弄了这个网址之后，我发现这个

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

还有这个

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

加载不同的网站。唯一的区别是尾部的斜线。

当我从 Visual Studio Code 本地运行时，本地服务器会自动添加斜杠； Azure 静态 Web 应用，没有

原始问题

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

我想创建一个新页面，所以我将所需的文件复制到一个新的联系人文件夹中。并进行所有更改。然后部署成功。

然而，部署的文件不是我修改的，而是原来的，好像没有检测到更改（如果需要检测更改）。举个例子。我在 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

此更新无关紧要，因此我将其删除，因此现在问题更清楚了。

Answer 1

最初认为 github 未部署某些文件（包括某些图像文件）的问题与 github 无关，而是与 Azure 静态应用程序已知问题有关。

事实证明，当指向文件夹时，Azure 静态 Web 应用服务器在 url 末尾不包含斜杠。

出现问题是因为没有尾部斜杠，html 文件中的所有相对引用都不会被理解为在当前文件夹中，而是在父文件夹中。

www.contoso.com/contact

指向联系人文件夹中的 index.html 文件，但该文件中的所有相对引用都指向根级别。

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

指向联系人文件夹中的 index.html 文件，该文件中的所有相关引用都按预期工作。

在 azure static web apps github https://github.com/Azure/static-web-apps/issues/42 中有一个值得投票的问题

解决方案 现在您有两种解决方法：

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

就我而言，当我遇到图像问题时，更改名称不是解决方案。不知何故，无意中，我在链接中包含了尾部斜杠。

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