DEV Community 👩‍💻👨‍💻

Cover image for Vue&Vite | 部屬到Github Pages簡易教學
周柏諭 BO-YU CHOU
周柏諭 BO-YU CHOU

Posted on

Vue&Vite | 部屬到Github Pages簡易教學

步驟

一、在Github創一個repo

二、打包專案

  1. vue.config.js & vite.config.js 內新增base key

    export default defineConfig({
      base: './blog/',
      plugins: [
        vue()
      ]
    })
    

    如果你的repo為<USERNAME>.github.io,那base為'./'

    如果你的repo為一般名稱,那base為'./<repo-name>'

  2. 儲存後,打包專案

    npm run build
    

三、把專案推到Github

  1. 打包完後根目錄會出現dist資料夾,此時目錄到這個資料夾下,創立一個git repo,分支名稱為gh-pages,push到Github上。

    git init
    
    git add .
    
    git commit -m "deploy"
    
    git branch -M gh-pages    // 這個指令可以創建並移動到該分支上
    
    git push -u 遠端url gh-pages
    
  2. 在Github repo → Setting → Pages,選擇branch,資料夾不用動(預設root),之後按Save

Image description

  1. 成功後,會出現以下這個,點開網址,就可以看到專案

Image description

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.