时间戳

首页 > 解决方案 > Gatsby 和内容丰富的网站在公共构建中的文件路径不正确

javascript - Gatsby 和内容丰富的网站在公共构建中的文件路径不正确

问题描述

尝试使用 Contentful CMS 部署 Gatsby 站点。在开发模式下一切正常——当我尝试构建时，事情变得很糟糕。

Gatsby build 命令部署站点，一开始看起来一切正常，但它会引发错误，阻止我的内容加载。

显示它的更简单方法是检查我的 github LIVE： GIT LIVE

简短描述：似乎是文件路径错误 - 尝试从直接路径获取文件（我的本地 F:\ 路径 -> 我的 git LIVE 主 github 页面（name.github.io/...））

我在构建原始 Gatsby 网站时遇到了同样的问题。

我的（原始）盖茨比主站点如下：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="x-ua-compatible" content="ie=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
	<link rel="preload" href="/component---src-layouts-index-js-07253e04741551c85ebc.js" as="script" />
	<link rel="preload" href="/component---src-pages-index-js-df93eb0c88a52638909b.js" as="script" />
	<link rel="preload" href="/path---index-a0e39f21c11f6a62c5ab.js" as="script" />
	<link rel="preload" href="/app-29169f9e7be0e183bc9a.js" as="script" />
	<link rel="preload" href="/commons-fcbb8af1639fee4f6844.js" as="script" />
	<title data-react-helmet="true">Gatsby Default Starter</title>
	<meta data-react-helmet="true" name="description" content="Sample" />
	<meta data-react-helmet="true" name="keywords" content="sample, something" />
	<style id="gatsby-inlined-css">
		
	</style>
</head>

<body>
	<div id="___gatsby">
		<div data-reactroot="" data-reactid="1" data-react-checksum="238678071">
			<!-- react-empty: 2 -->
			<div style="background:rebeccapurple;margin-bottom:1.45rem;" data-reactid="3">
				<div style="margin:0 auto;max-width:960px;padding:1.45rem 1.0875rem;" data-reactid="4">
					<h1 style="margin:0;" data-reactid="5"><a style="color:white;text-decoration:none;" href="/" data-reactid="6">Gatsby
							Default Starter</a></h1>
				</div>
			</div>
			<div style="margin:0 auto;max-width:960px;padding:0px 1.0875rem 1.45rem;padding-top:0;" data-reactid="7">
				<div data-reactid="8">
					<h1 data-reactid="9">Hi people</h1>
					<p data-reactid="10">Welcome to your new Gatsby site.</p>
					<p data-reactid="11">Now go build something great.</p><a href="/page-2/" data-reactid="12">Go to page 2</a>
				</div>
			</div>
		</div>
	</div>
	<script id="webpack-manifest">
		/*<![CDATA[*/
		window.webpackManifest = {
			"231608221292675": "app-29169f9e7be0e183bc9a.js",
			"162898551421021": "component---src-pages-404-js-4503918ea3a16cfcdb75.js",
			"35783957827783": "component---src-pages-index-js-df93eb0c88a52638909b.js",
			"218538773642512": "component---src-pages-page-2-js-1d4f0f19c1c44398ab65.js",
			"60335399758886": "path----cac63ff5c1b42581353c.js",
			"254022195166212": "path---404-a0e39f21c11f6a62c5ab.js",
			"142629428675168": "path---index-a0e39f21c11f6a62c5ab.js",
			"135728916539164": "path---page-2-a0e39f21c11f6a62c5ab.js",
			"178698757827068": "path---404-html-a0e39f21c11f6a62c5ab.js",
			"114276838955818": "component---src-layouts-index-js-07253e04741551c85ebc.js"
		} /*]]>*/
	</script>
	<script>
		/*<![CDATA[*/
		["/commons-fcbb8af1639fee4f6844.js", "/app-29169f9e7be0e183bc9a.js", "/path---index-a0e39f21c11f6a62c5ab.js",
			"/component---src-pages-index-js-df93eb0c88a52638909b.js",
			"/component---src-layouts-index-js-07253e04741551c85ebc.js"
		].forEach(function (s) {
			document.write('<script src="' + s + '" defer></' + 'script>')
		}) /*]]>*/
	</script>
</body>

</html>

手动解析路径，例如像这样替换链接href：

<link rel="preload" href="/component---src-layouts-index-js-07253e04741551c85ebc.js" as="script" />

进入（只是添加点）

<link rel="preload" href="./component---src-layouts-index-js-07253e04741551c85ebc.js" as="script" />

使此特定错误消失，并发出如下警告：

The resource file://(path here) was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

和另一个错误（不再指向 HTML HEAD 的行，而是指向最后一个脚本（签名为 CDATA）

<script>
    /*<![CDATA[*/
    ["/commons-fcbb8af1639fee4f6844.js", "/app-29169f9e7be0e183bc9a.js", "/path---index-a0e39f21c11f6a62c5ab.js",
        "/component---src-pages-index-js-df93eb0c88a52638909b.js",
        "/component---src-layouts-index-js-07253e04741551c85ebc.js"
    ].forEach(function (s) {
        document.write('<script src="' + s + '" defer></' + 'script>')
    }) /*]]>*/
</script>

更进一步——这里改变路径创造了另一个“有趣”的事情。尝试加载页面时，它会“闪烁”网站的样式和所有内容（仅一瞬间），然后引发多个错误，例如

A page wasn't found for "/F:/HTML/TEST-2/site/public/index.html
bundle loading error true
Loading the component for /404.html failed
bundle loading error true
Loading the JSON for /404.html failed

我知道我不应该在工作过程中自己做这一切修复路径的事情，但是我不知道问题出在哪里。

希望我把我的问题说清楚了:)

标签： javascriptreactjsgithub-pagesgatsbycontentful

解决方案

我对您网站上存在的错误进行了更深入的研究。

1- 我看到的第一对错误与 Font Awesome 相关：

子资源完整性：资源“ https://use.fontawesome.com/releases/v5.3.1/css/solid.css ”具有完整性属性，但该资源需要启用 CORS 以检查完整性，并且它不是。资源已被阻止，因为无法强制执行完整性。

子资源完整性：资源“ https://use.fontawesome.com/releases/v5.3.1/css/fontawesome.css ”具有完整性属性，但该资源需要启用 CORS 以检查完整性，并且它不是。资源已被阻止，因为无法强制执行完整性。

integrity这些与您的 Font Awesome 上的属性相关的 CORS包括（压缩代码库中的第 29 行）。

<link data-react-helmet="true" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/solid.css" integrity="sha384-VGP9aw4WtGH/uPAOseYxZ+Vz/vaTb1ehm1bwx92Fm8dTrE+3boLfF1SpAtB1z7HW"/>
<link data-react-helmet="true" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/fontawesome.css" integrity="sha384-1rquJLNOM3ijoueaaeS5m+McXPJCGdr5HcA03/VHXxcp2kX2sUrQDmFc3jR5i/C7"/>

只需删除校验和哈希，或者您可能想检查为什么这些无效。这就是 CSS 闪烁正常的原因；Chrome 检查哈希，发现它无效并将其从 DOM 中删除。

2-第二组错误有一堆你的JS文件404ing。Chrome DevTools 中的错误如下所示：

获取 https://emzawadzki.github.io/component---src-layouts-index-js-4386bcf88f311dc59346.js net::ERR_ABORTED 404

如果我们隔离这些文件的路径来自哪里，您可以将它们跟踪到您的 webpack 构建的清单（第 738 行）：

<script id="webpack-manifest">
    /*<![CDATA[*/
    window.webpackManifest = {
        "231608221292675": "app-cdbd5391462f32fb5915.js",
        "162898551421021": "component---src-pages-404-js-f6662393a31fb18d5e07.js",
        "35783957827783": "component---src-pages-index-js-6fe4a58b68048902490d.js",
        "60335399758886": "path----557518bd178906f8d58a.js",
        "254022195166212": "path---404-a0e39f21c11f6a62c5ab.js",
        "142629428675168": "path---index-a0e39f21c11f6a62c5ab.js",
        "178698757827068": "path---404-html-a0e39f21c11f6a62c5ab.js",
        "114276838955818": "component---src-layouts-index-js-4386bcf88f311dc59346.js"
    }
    /*]]>*/
</script>

错误出现在您的 webpack 构建中。Gatsby 将大部分 webpack 构建内容隐藏在幕后，因此错误很可能来自您的gatsby-config.js文件。如果你可以调整它，我很确定这就是第二个问题的来源。注释掉您不使用的所有内容并仔细检查您的本地错误日志。

推荐阅读