将 React 应用程序部署到 github 页面。 得到...净::ERR_ABORTED

Question

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 正确执行

包.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"
}
}

Answer 1

"homepage": "."

这会奏效！

正如@Maksim Luzik 已经描述了上面的问题。

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

例如：- 这..

https://{用户名}.github.io/portfolio /justinschneider.github.io/portfolio/static/css/main.233e2870.css

将会...

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

希望你能明白。

Answer 2

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

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

Answer 3

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

Answer 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"
}
}