vite 构建的vue3 项目部署到github

最新推荐文章于 2025-03-25 09:27:11 发布

~，555555

最新推荐文章于 2025-03-25 09:27:11 发布

阅读量3.8k

点赞数 3

分类专栏：前端学习文章标签： github vue.js 部署 pages vite

本文链接：https://blog.csdn.net/weixin_44717047/article/details/120113869

版权

前端学习专栏收录该内容

84 篇文章

订阅专栏

本文详细介绍了如何使用Vite.js配置项目，并将其部署到GitHub Pages。首先，设置vite.config.js，根据仓库名设置base属性。然后，通过npm run build构建项目，生成dist文件夹。接着，本地预览确保无误后，将dist内容推送到gh-pages分支。最后，在GitHub上开启Pages功能，即可完成部署。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其实这是一个很简单的事情，但是我以为特别复杂，因为可能不知道哪里就搞错了。

1.设置好`vite.config.js`

首先，先仔细看构建应用和部署到github pages。

看完这两部分内容之后，就知道了在在 vite.config.js 中设置正确的 base。

如果你要部署在 https://<USERNAME>.github.io/ 上，你可以省略 base 使其默认为 ‘/’。
如果你要部署在 https://<USERNAME>.github.io/<REPO>/ 上，例如你的仓库地址为 https://github.com/<USERNAME>/<REPO>，那么请设置 base 为 ‘/<REPO>/’。

REPO 代表仓库名，USERNAME 用户名。我想要部署的为第二种情况，我的仓库名为fireblogs。
在这里插入图片描述
我最终想形成的链接为https://liujiaqi222.github.io/fireblogs/ ，因此我需要如下配置。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base:'/fireblogs/'
})

2. 构建项目

npm run build
# 或者
yarn build

执行上述命令后，就会看到根目录下，多了一个dist文件夹，这便是我们需要部署的文件夹。

3. 预览项目

接着我们本地预览一下：

npm run serve
# 或者
yarn serve

默认vite 生成的项目，package.json 中的srcipt 配置应该是如下

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
}

因此执行npm run serve命令，可以在本地预览一下build 后的项目。
在这里插入图片描述

4. 部署到github

如果上面的preview 没有问题，就可以部署到github了。

在github中，我将项目的源代码上传到了master分支，因此接下来要将dist 文件夹上传到另外一个分支，给这个分支起个名字gh-pages。

这里将dist 文件夹上传到gh-pages最简单的方法就是：

git subtree push --prefix dist origin(远程主机的名字) gh-pages

执行这条命令的前提是你已经完成了 git add. git commit git push 这些操作。

5. 开启pages功能

将分支切换到gh-pages，然后save，就能成功开启页面了！
在这里插入图片描述