DEV Community
·
在GitHub Pages上部署Vite React项目，使用React Router避免404错误
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
在GitHub Pages上发布Vite React项目时，使用React Router可能会遇到404错误。解决方法是设置vite.config.ts中的基本URL，并在BrowserRouter中添加basename。同时，确保在package.json中配置homepage和部署命令，最后运行npm run deploy。
🎯
关键要点
- 在GitHub Pages上发布Vite React项目时，可能会遇到404错误。
- 解决404错误的方法是设置vite.config.ts中的基本URL和在BrowserRouter中添加basename。
- 确保在package.json中配置homepage和部署命令。
- 运行npm run deploy命令以完成部署。
- 注意repo-name的前后斜杠，使用/repo-name而不是/repo-name/。
❓
延伸问答
如何在GitHub Pages上发布Vite React项目？
在GitHub Pages上发布Vite React项目需要设置基本URL，配置homepage和部署命令，然后运行npm run deploy。
为什么在使用React Router时会遇到404错误？
使用React Router时，404错误通常是因为未正确设置基本URL和BrowserRouter的basename。
如何配置vite.config.ts以避免404错误？
在vite.config.ts中设置base为'/repo-name'，以确保正确的URL结构。
在package.json中需要添加哪些配置？
在package.json中添加'homepage'和部署命令'predeploy'及'deploy'。
如何正确使用BrowserRouter？
在BrowserRouter中添加basename属性，例如<BrowserRouter basename="/repo-name">。
部署后如何检查网站是否成功发布？
可以在GitHub仓库的Settings>Pages标签中检查网站是否成功发布。
🏷️
标签
➡️
