将 React 应用程序部署到 github 页面。 GET ...网络::ERR_ABORTED答案

【问题标题】：Deploying React app to github pages. GET ... net::ERR_ABORTED将 React 应用程序部署到 github 页面。 GET ...网络::ERR_ABORTED
【发布时间】：2018-06-02 16:50:48
【问题描述】：

GitHub：https://github.com/Justin-Schneider/portfolio

页面链接：https://justin-schneider.github.io/portfolio/

该链接没有显示任何内容，我收到以下两个错误：

GET https://justin-schneider.github.io/portfolio/justin-schneider.github.io/portfolio/static/css/main.233e2870.css net::ERR_ABORTED
GET https://justin-schneider.github.io/portfolio/justin-schneider.github.io/portfolio/static/js/main.c60b5716.js net::ERR_ABORTED

npm run deploy 正确执行

package.json

{
"name": "my-website",
"version": "0.1.0",
"private": true,
"homepage": "justin-schneider.github.io/portfolio",
"dependencies": {
  "react": "^16.2.0",
  "react-bootstrap": "^0.31.5",
  "react-dom": "^16.2.0",
  "react-scripts": "1.0.17"
},
"scripts": {
  "deploy" : "npm run build&&gh-pages -d build",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
},
"devDependencies": {
  "gh-pages": "^1.1.0"
}
}

【问题讨论】：

我得到GET Status Code:404 https://justin-schneider.github.io/portfolio/justin-schneider.github.io/portfolio/static/css/main.233e2870.css 和https://justin-schneider.github.io/portfolio/justin-schneider.github.io/portfolio/static/js/main.c60b5716.js 你有那些具有确切名称和路径的文件吗？看起来您可能拼写了路径或类似内容？
是的，我的仓库中列出了这些文件。然而他们是https://justin-schneide‌r.github.io/portfoli‌o/static/css/main.23‌3e2870.css 而不是https://justin-schneider.github.io/portfolio/justin-schneide‌r.github.io/portfoli‌o/static/css/main.23‌3e2870.css 不知道为什么它是重复的。我列出的错误也是在询问“详细”错误之后。
您似乎以project 方式创建了 GitHub 页面，但我在您的 repo 中找不到您的 index.html 或任何 css 或 js 文件：github.com/Justin-Schneider/portfolio ?
它们在 gh-pages 分支中，并且页面的源设置为该分支。

标签： node.js reactjs github-pages

【解决方案1】：

"homepage": "."

这行得通！

正如@Maksim Luzik 所描述的上述问题。

我们需要将 package.json 中的 URL 替换为 '.'路径。

例如：- 这个..

https://{username}.github.io/portfolio/justinschneider.github.io/portfolio/static/css/main.233e2870.css

将会……

./justinschneider.github.io/portfolio/static/css/main.233e2870.css

希望你能明白。

【讨论】：

【解决方案2】：

在你的 nodejs 中确保你将构建文件夹设为静态，以便可以从浏览器访问它

   app.use(express.static('./client/build/'));
   app.use('/', express.static('./client/build/index.html'));

【讨论】：

对不起，我不太明白你所说的“在你的 nodejs 中”是什么意思，你能不能引用一个文件或其他东西？
如果你使用 express，在你的服务器文件中添加上面的行和你的相对路径以使 react js 文件的构建可以访问

【解决方案3】：

似乎在您的 react-scripts build 中，react 是使用相对路径构建的，因此错误地引用了 https://justin-schneider.github.io/portfolio/justin-schneider.github.io/portfolio/static/css/main.233e2870.css 而不是正确的 url：https://justin-schneider.github.io/portfolio/static/css/main.233e2870.css。如果您无法在 react-build 中更改 css 和 js 的 dist 路径，您可以考虑使用 https://webpack.js.org/ 作为 css 和 js 捆绑器，在那里您可以设置静态目录的选项，以便您可以正确引用它们.

【讨论】：

感谢您的帮助，这实际上很容易解决。我犯了一个愚蠢的错误。

【解决方案4】：

在我的 package.json 中，我需要“https://justin-schneider.github.io/portfolio”，而不仅仅是“justin-schneider.github.io/portfolio”

我更新的 package.json

{
"name": "my-website",
"version": "0.1.0",
"private": true,
"homepage": "https://justin-schneider.github.io/portfolio",
"dependencies": {
  "react": "^16.2.0",
  "react-bootstrap": "^0.31.5",
  "react-dom": "^16.2.0",
  "react-scripts": "1.0.17"
 },
"scripts": {
  "deploy" : "npm run build&&gh-pages -d build",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
  },
"devDependencies": {
  "gh-pages": "^1.1.0"
}
}

【讨论】：