【Vue】打包vue3+vite项目发布到github page的完整过程

---

环境：
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项目后白屏问题