Blank page when deploying a react app to github pages and vite答案

【问题标题】：Blank page when deploying a react app to github pages and viteBlank page when deploying a react app to github pages and vite
【发布时间】：2022-12-27 13:48:38
【问题描述】：

When i try to deploy my react app to github pages with the package gh-pages, the result page is blank.result page

The page I am trying to deploy is here: LINK I don't know if it matters but I am currently using the free domain given to me by GitHub: www.elvas.me

I tried following the react official docs: Link, but it didn't work for me... Perhaps it's because I am using vite and not create-react-app?

*Edit*

Found out that the site is trying to get the .js and the .css from the wrong place.

I just don't know what I am doing wrong...

【问题讨论】：

Have you set the "/" route ?
How do I do that? In the index.html?
I mean in the app.js, where you define your routes, is the "/" (the home route) defined ?
I don't think it is... But I am not using react-router, do I need it?
For this specific project, i do not need more than one route :)

标签： reactjs web-deployment github-pages vite

【解决方案1】：

Ok, so to solve this the only thing that I had to do was to add base:"{repName}" to thevite.config.tsfile.

Source: https://vitejs.dev/guide/static-deploy.html

The images were not loading, I used this to fix them: Github pages vite JS build not showing the images

【讨论】：

【解决方案2】：

I see that you have managed to deploy your React project to Github pages successfully, but here is how I did it in case anyone needs help:

First things first, make sure that your ".git" folder and your project are on the same folder.

Run npm run build. You should have a dist folder now.
Open the file vite.config.js (or .ts).
Add the base file with your repository name. Include the two /.
Example: let's say your github project's URL is https://github.com/atlassian/react-beautiful-dnd.
```
export default defineConfig({
  base: "/react-beautiful-dnd/",
  plugins: [react()],
});
```
1. Open your .gitignore file anddeletethe dist. You want to make sure that the dist folder is pushed to github.
2. git add .
3. git commit -m "deploy"
4. git subtree push --prefix dist origin gh-pages
5. Wait for a couple minutes (in my case it took 4 minutes) and open the page. In the example above, the URL would look like this:https://atlassian.github.io/react-beautiful-dnd
That is about it, I hope it helps. I used this blog post for guidance, it is a more detailed explanation of the above.

【讨论】：