文章目录
- 第一步：打包
- 第二步：github仓库设置
- 第三步：安装插件gh-pages
- 第四步：两个配置
- 第五步：上传github
- 其他问题
- 1. 路由
- 2.待补充
- 参考文章：
环境：
vue3+vite
windows11（使用终端即可）
“vue”: “^3.5.13”,
“vue-router”: “^4.5.0”,
“gh-pages”: “^6.3.0”,
第一步：打包
先进入你vue项目的地方
cd xxxxxxxx
然后，把项目打包
npm run build
打包完一般长这样，多出一个dist文件夹目录
这里的index.html就是适配后面github page要求的主页，没有这个静态页面无法正确启动
第二步：github仓库设置
GitHub官网网址
首先你必须应该有一个你个人账号的github仓库
且安装好了git相关配置
且必须是public公开的仓库！（除非你准备花钱开私人的那个page服务）
第三步：安装插件gh-pages
回到你的vue项目
在你打包的同一个目录下，安装一个专门用于打包vue的插件
npm install --save-dev gh-pages
第四步：两个配置
在vite.config.js文件里加上base：你的仓库名称！（注意路径和引号都不要省略，根据自己的实际情况有些可能是直接根目录'./'，我这次打包不是）
export default defineConfig({
base: '/github仓库名称/',
xxxxxxx
})
在package.json文件里加上deploy这一行，用于后续运行deploy打包直接输出到github
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"deploy": "gh-pages -d dist"
},
第五步：上传github
npm run deploy
然后等一会，会显示如下
published出来，就证明没问题了
进入你的仓库，找到Setting进入设置再点击Pages，可以看到上面一般有一个网址
去访问就行了
注意！默认是上传到gh-pages分支了的！
所以如果page里设置save的是这个分支则是正确的
其他问题
1. 路由
在使用插件前，我试过手动上传，于是白屏了，根据查资料发现可能一个原因是vue-router，index.js文件里需要改成Hash
const router = createRouter({
history: createWebHashHistory(import.meta.env.BASE_URL),
//原来是createWebHistory
routes: [
………
],
})
改完会发现网址多了个井号#，这可能是一个问题解决办法。
2.待补充
参考文章：
GitHub Pages 快速入门 - GitHub 文档
GitHub Pages部署vue项目后白屏问题
