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

Question

更新 3

抱歉我把这个更新放在这里，但我有一个很好的发现。阅读下面标题为 Original Qestion 的内容，回顾我所做的事情。

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

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

还有这个

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

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

当我运行 this locally from Visual Studio 代码时，本地服务器会自动添加斜杠； Azure 静态网络应用程序，没有

原题

我正在制作一个基于 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;
 }

几个星期前，当我更新内页的图片时，我遇到了类似的情况，none 在浏览已发布的网站时加载了其中的图片，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

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

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

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

在所有资源引用中使用绝对 url。这个甚至在访问者键入 url 并忘记键入尾部斜线时也有效。

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

Azure static web apps not loading page resources correctly. css or javascript files

github-actions

azure-static-web-app