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

环境：

vue3+vite

windows11（使用终端即可）

"vue": "^3.5.13",

"vue-router": "^4.5.0",

"gh-pages": "^6.3.0",

先进入你vue项目的地方

shell 复制代码

cd xxxxxxxx

然后，把项目打包

shell 复制代码

npm run build

打包完一般长这样，多出一个dist文件夹目录

这里的index.html就是适配后面github page要求的主页，没有这个静态页面无法正确启动

首先你必须应该有一个你个人账号的github仓库

且安装好了git相关配置

且必须是public公开的仓库！（除非你准备花钱开私人的那个page服务）

回到你的vue项目

在你打包的同一个目录下，安装一个专门用于打包vue的插件

shell 复制代码

 npm install --save-dev gh-pages

在vite.config.js文件里加上base：你的仓库名称！（注意路径和引号都不要省略，根据自己的实际情况有些可能是直接根目录'./'，我这次打包不是）

js 复制代码

export default defineConfig({

  base: '/github仓库名称/',
  
  xxxxxxx
  })

在package.json文件里加上deploy这一行，用于后续运行deploy打包直接输出到github

js 复制代码

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "gh-pages -d dist"
  },

shell 复制代码

npm run deploy

然后等一会，会显示如下

published出来，就证明没问题了

进入你的仓库，找到Setting进入设置再点击Pages，可以看到上面一般有一个网址

去访问就行了

注意！默认是上传到gh-pages分支了的！

所以如果page里设置save的是这个分支则是正确的

在使用插件前，我试过手动上传，于是白屏了，根据查资料发现可能一个原因是vue-router，index.js文件里需要改成Hash

js 复制代码

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL), 
  //原来是createWebHistory
  routes: [
    .........
  ],
})

改完会发现网址多了个井号#，这可能是一个问题解决办法。