【发布时间】：2018-09-09 12:34:15
【问题描述】：
尝试使用 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
我知道我不应该在工作过程中做这一切自己修复路径的事情，但是我不知道问题出在哪里。
希望我把我的问题说清楚了 :)
【问题讨论】：
-
当你在控制台运行
gatsby develop时，你得到什么错误反馈？具体来说，当您在开发模式下运行构建时，您应该会看到构建的问题。您似乎还没有准备好部署所有这些错误。 -
这就是重点 - gatsby develop 不会抛出任何错误或警告，浏览器控制台也是如此。似乎一切正常，直到我开始建立我的网站......
-
本地能建吗？
-
是的，我确实在本地构建，但是本地版本就像我上面描述的那样，充满了错误。
标签： javascript reactjs github-pages gatsby contentful