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

Question

更新3

抱歉我把这个更新放在这里，但我做了一个很好的发现。请阅读下面标题为“原始问题”的内容，回顾一下我所做的事情。

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

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

和这个

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

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

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

原始问题

我正在制作一个基于天蓝色静态网络应用程序的简单网站。我使用了本指南https://marketplace.visualstudio.com/items?itemName=ms-azuretools.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

此更新不相关，因此我删除了，因此问题现在更清楚了。

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 静态 Web 应用程序 github 中投票https://github.com/Azure/static-web-apps/issues/42

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

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

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

2. 在所有资源引用中使用绝对 URL。即使访问者键入 url 但忘记键入尾部斜杠，此功能也能正常工作。

更新 最终解决方案 不久前，微软针对此问题部署了一个解决方案。他们添加了使用 staticwebapp.config.json 文件中的 TrailingSlash 配置来配置尾部斜杠行为的功能。

请参阅此文档了解更多详细信息。 https://learn.microsoft.com/azure/static-web-apps/configuration#trailing-slash