Azure静态Web应用程序未正确加载页面资源。Css或javascript文件 [英] Azure static web apps not loading page resources correctly. css or javascript files

问题描述

更新3

很抱歉我将此更新放在这里，但我做了一个很好的发现。请阅读下面标题下的原始问题，以回顾我所做的工作。

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

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

和这个

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

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

当我从Visual Studio代码本地运行时，本地服务器会自动添加斜杠；Azure Static Web应用程序不会

原始问题

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

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

但是，部署的文件不是我修改的文件，而是原始文件，就好像没有检测到任何更改一样(如果它需要检测更改)。举个例子。我在GitHub中有此样式.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

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

推荐答案

该问题最初被认为是giHub未部署某些文件，包括某个时刻的一些图像文件，但该问题与giHub无关，而是与Azure静态应用程序已知的问题有关。

结果是，指向文件夹时，Azure Static 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并忘记输入尾随斜杠的情况下，这种方法也可以使用。

这篇关于Azure静态Web应用程序未正确加载页面资源。Css或javascript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！