GitHub Pages部署vue项目后白屏问题

本文链接：https://blog.csdn.net/qq_53335793/article/details/141325987

听说github pages可以托管静态页面，正好这两天没事打算学一学试一试，于是心血来潮创建了一个vite项目，起初将项目一步一步搭建，并且在本地运行都很顺利，于是将项目放到github并且按照文档
GitHub Pages 快速入门 - GitHub 文档
进行了一步步操作：

点击settings
点击pages
选择Deploy from a branch
选择main分支
选择根路径/(root)
Save
稍等一小会

一顿操作下来也很顺利，也成功在刷新后看到页面上方显示"Your site is live at https://<username>.github.io/..."，那么问题来了，当我点击【Visit site】准备查看结果时，居然白屏了。。。。什么鬼！！

经我一顿研究后找到了个方法：

安装一个依赖包
这个依赖的作用大概就是：将项目生成的资源文件包自动以分支（分支名：gh-pages）形式上传到远程仓库。
```
npm install --save-dev gh-pages
```

然后要配置一下package.json,在"scripts"中,添加两行配置，第二行中，不一定非要是dist，但一定要与下一步中的outDir保持一致。

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    // 添加以下两行↓
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
},

在配置文件中先添加base配置，我的项目名是consum-pro-demo，这里用你自己的项目名替换掉（当然可以通过loadEnv来动态加载事先定义好的环境变量，此处便不再赘述）；
另外查看打包路径outDir要与上一步的deploy配置项的最后一串字符保持一致（可以改成build或其他名称随意，那一定要上下两个保持统一）
然后执行命令进行打包
```
npm run deploy
```
OK了，成功大部分了，然后把项目代码push到github远程仓库，查看分支就会发现自动多了个分支gh-pages
然后在上面第4步的时候，选择这个分支gh-pages进行部署就可以啦，save完后要稍等一小会哦，大概一两分钟的样子。