React Github Pages 部署 ERR_ABORTED 404（未找到）

Question

我正在尝试部署我的create-react-app到这里，但我遇到了以下错误：static/css/1.e03ed13c.chunk.css net::ERR_ABORTED 404 (未找到)。我没有任何chunk.css文件。问题出在哪里？你能帮我吗？

我的package.json文件如下：

{
  "homepage": "http://ebrugulec.com/image-text-detection",
  "name": "image-text-detection",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "filepond": "^3.5.0",
    "filepond-plugin-image-preview": "^3.1.4",
    "react": "^16.6.3",
    "react-autosize-textarea": "^5.0.1",
    "react-dom": "^16.6.3",
    "react-dropzone": "^7.0.1",
    "react-filepond": "^5.0.0",
    "react-scripts": "2.1.1",
    "superagent": "^4.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "gh-pages": "^2.0.1"
  }
}

- Ebru Gulec

---

https://medium.com/@_mariacheline/deploy-create-react-app-project-to-github-pages-2eb6deda5b89 - SakoBu

请问您能分享一下您的 package.json 文件吗？ - sudo bangbang

我猜你可能忘了在 package.json 中更正你的 homepage。此外，chunk.css 已经生成。 - sudo bangbang

我编辑了我的问题，并添加了一个 package.json 文件。@sudobangbang - Ebru Gulec

我没有正确解决这个问题。但我意识到了一些事情。如果我首先部署GitHub页面，GitHub页面不起作用。然而，如果我在GitHub上发送当前拉取请求，之后再部署gh-pages，它就可以正常工作了。我不知道。有时gh-pages工作得不太好。@kuka - Ebru Gulec

Answer 1

我通过在react应用程序项目目录的'package.json'文件中添加以下内容：

"homepage" : "https://我的博客URL",

解决了这个问题。

'xxx.chunk.js'和'xxx.chunk.css'文件位于'build/static/'目录中。

当我进入chrome浏览器的开发者工具网络选项卡查看确切的错误消息时，我能够找到浏览器要访问的url，而在我的情况下，我的博客地址与我期望的不同。

- Wood

---

将 "homepage": "." 添加到 package.json 对我有用。 - Klyner

Answer 2

我通过在package.json文件中添加"homepage": "."的方式解决了这个问题。

- jake

Answer 3

如果在package.json中添加“homepage”：“。”无效，则此答案将帮助您。

我已经检查了我的开发者控制台，我的第一个指示是，这个抛出错误的build文件夹在哪里。

步骤1: （可选，如果您的构建文件夹已提交，则跳过此步骤） 如果未提交，请先提交您的构建文件夹。

提交构建文件夹：

• 首先从您的.gitignore中删除构建文件夹的引用。
• 然后添加您的文件夹并提交。

示例：我的构建文件夹的路径是covidresources -> build。 （注意：git add .只是为了包括其他文件，如果有的话）

git add covidresources/build
git add . 
git commit -m "added build files"
git push

请确认您的构建文件是否已提交。

步骤2：现在，我们将选择一个文件，并比较它在仓库中的路径和在开发者控制台中的路径（即出现错误的文件）。

• 最初我在package.json中有"homepage": "."。
• 选取控制台中的任何错误，例如在我的情况下，我选取了这个文件的路径：2.6770f89d.chunk.js。

https://kushalseth.github.io/kushalseth/mycovid/blob/main/covidresources/static/js/2.6770f89d.chunk.js

• 在代码库中搜索相同的文件路径。

• 现在比较这两个路径：

解决方案：

• 将"homepage": "."替换为路径，类似于这样：（实际和文件路径的截图将有助于创建此URL。只需删除用户名，并在github.com之后添加存储库名称）

"homepage": "https://github.com/mycovid/"

• 部署并提交您的文件。我们的主要目标是提交build/asset-manifest.json文件。

npm run deploy
npm add .
npm commit -m "committing manifest"
npm push

您的清单文件应该是这样的：（repoitoryname/static）。

重要的是要更新您的服务器清单文件，验证清单中的路径也很重要。 我们不会手动更改清单中的任何内容。它会通过npn运行部署自动更新，并且package应该具有正确的主页。

刷新页面，在开发者控制台的网络选项下，成功路径将会如下所示：

https://kushalseth.github.io/mycovid/static/js/2.6770f89d.chunk.js

- KushalSeth

Answer 4

在 package.json 文件中添加以下属性即可解决此问题。 "homepage": "."

- Muthu