如何将Vue项目部署到GitHub，同时访问页面

1、先把项目上传到GitHub

2、修改vite.config.ts配置

export default defineConfig({
  base: './',   // 加这一行
 })

3、打包项目，生产dist文件

npm run build

4、将dist文件复制到桌面

5、 创建gh-pages分支，用于存放打包文件

说明：gh-pages只放dist中的所有文件，其他什么都删掉。

git branch gh-pages   // 创建
git checkout gh-pages  // 切换分支

// 如果在gh-pages分支还存在 node_modules依赖文件，那么执行强制删除，这样删除速度会快很多。
// 等代码提交成功后切回main分支再重新npm install安装就行，安装也是很快的。
rm -rf node_modules

6、打开桌面的dist文件，将里面所有文件取出粘贴到当前gh-pages分支的根目录

assets文件夹里面的文件不用动

assets 
index.html
favicon.ico
vite.config.ts

7、提交代码以及新分支到远端Github仓库

用VSCode这样提交，比较快。

8、到GitHub的项目Settings中设置相关部署东西

vue项目都是只有这几个文件

Save保存成功后刷新页面等几分钟，页面链接就生成出来了，直接访问即可。

9、访问测试，

https://hsg666.github.io/test-skucomponent/

常见问题：

如果出现访问后控制台出现，代表是上面提到的vite.config.ts文件路径没设置相对路径，配置后重新提交代码并重新部署就OK了。

Failed to load resource: the server responded with a status of 404 ()。