vite 构建的vue3 项目部署到github1.设置好vite.config.js

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

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，就能成功开启页面了！