无法将反应应用程序部署到 github 页面 404 错误
Posted
技术标签:
【中文标题】无法将反应应用程序部署到 github 页面 404 错误【英文标题】：unable to deploy react app to github pages 404 error 【发布时间】：2021-03-23 22:05:09 【问题描述】：我目前正在尝试将我的 react 应用程序部署到 Netlify 或 GitHub Pages，但我收到 404 错误或未加载应用程序。在我的本地主机上一切正常。我不太确定这是否是问题所在，但我认为我没有正确地从 index.html 调用我的应用程序或 root。我也不确定这是否是问题。
这是我的 github 页面（不运行应用程序）：https://mattfang1999.github.io/matt-task-manager-app/ 这是 netlify（404 错误）：https://condescending-galileo-fe4225.netlify.app/
目前，这是我的 index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="http://example.com/favicon.png">
<title>Matt's Task Manager</title>
</head>
<body>
<noscript>
You need to enable javascript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
这是我的 index.js
import React from 'react';
import render from 'react-dom';
import App from './App';
import './App.scss';
render(<App />, document.getElementById('root'));
最后，这是我的 App.js
import React, useState from 'react';
import Header from './components/layout/Header';
import Content from './components/layout/Content';
import ProjectsProvider, SelectedProjectProvider from './context';
export const App = ( darkModeDefault = false ) =>
const [darkMode, setDarkMode] = useState(darkModeDefault);
return (
<SelectedProjectProvider>
<ProjectsProvider>
<main
data-testid="application"
className=darkMode ? 'darkmode' : undefined
>
<Header darkMode=darkMode setDarkMode=setDarkMode />
<Content />
</main>
</ProjectsProvider>
</SelectedProjectProvider>
);
;
这是我的 package.json
"homepage": "https://mattfang1999.github.io/matt-task-manager-app/",
"name": "taskmanagerapp",
"version": "0.1.0",
"private": true,
"dependencies":
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"firebase": "^6.2.4",
"gh-pages": "^3.1.0",
"install": "^0.13.0",
"moment": "^2.24.0",
"node-sass": "^4.12.8",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-icons": "^3.11.0",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4"
,
"scripts":
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
,
"browserslist":
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
任何帮助将不胜感激！
【问题讨论】：
奇怪的是您的链接看起来像这样：/mattfang1999/matt-task-manager-app.git/static/css/，它们应该看起来像这样：/matt-task-manager-app/static/css/
我想我不确定必须在 package.json 中放入哪个主页链接
【参考方案1】：
当我将taskmanagerapp 文件夹的内容上移一级并在根文件夹（package.json 文件所在的位置）中运行npm run deploy 时，我已经克隆了您的存储库并可以成功将其部署到GitHub Pages .
更新：除了更改package.json 文件中的homepage URL 和deployed fine 之外，我还尝试在不更改任何内容的情况下部署它。
更新 2： 如果我的 repo 的 URL 是 https://github.com/zsoltime/pospof，我将 package.json 中的主页设置为 "homepage": "https://zsoltime.github.io/pospof/"。
【讨论】：
什么会被视为根文件夹？ 改首页是直接用github提供的HTTPS链接，还是设置推荐的网站？对于第一个解决方案，什么会被视为根文件夹？ Zsolt Meszaros以上是关于无法将反应应用程序部署到 github 页面 404 错误的主要内容，如果未能解决你的问题，请参考以下文章