🕌
githubpagesが真っ白で表示されないエラーを修正
結論:index.htmlのファイルパスを以下の通りに修正すれば解決した
githubpagesにて公開するために参考にした動画
index.htmlのパス
projectfolder
└── dist
└──index.html
修正前
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<script type="module" crossorigin src="/assets/index-○○.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index--○○.css">
<!--index-の後の文は○○に変更しています-->
</head>
<body>
<div id="root"></div>
</body>
</html>
修正後
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<script type="module" crossorigin src="./assets/index-○○.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index--○○.css">
<!--index-の後の文は○○に変更しています-->
</head>
<body>
<div id="root"></div>
</body>
</html>
変更した部分
+ <script type="module" crossorigin src="./assets/index-○○.js"></script>
- <script type="module" crossorigin src="/assets/index-○○.js"></script>
+ <link rel="stylesheet" crossorigin href="./assets/index--○○.css">
- <link rel="stylesheet" crossorigin href="/assets/index--○○.css">
このように変更したことでパスが正しく指定され、エラーが修正されました
- 修正前
Failed to load resource:" the server responded with a status of 404 () とエラーがでていて表示されない - 修正後
エラーがなくなり正常に表示されている
Discussion