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，就能成功開啟頁面了！