Question

尝试通过ContentCMS部署Gatsby网站。一切在开发模式下都可以正常工作-当我尝试构建时，事情变得很艰难。

Gatsby build命令部署了站点，乍一看一切都不错，但是它引发错误，阻止了我的内容加载。

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

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

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

我的（原始）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

我知道我不应该在工作过程中自行解决所有问题，但是我不知道问题出在哪里。

希望我明确了我的问题：）

Answer 1

我对出现的错误on your site进行了更深入的研究。

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来检查完整性，但不是。资源有   由于无法强制执行完整性而被阻止。

这些与Font Awesome上integrity属性的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文件。如果您可以对此进行调整，我很确定这就是第二个问题的出处。注释掉所有不使用的内容，并仔细检查本地错误日志。

Gatsby和内容丰富的网站在公共版本中的文件路径不正确

1 个答案: