VueCli打包後部屬至Github

一、第一步-建置與安裝套件

先至Github建立一個空間

在專案目錄中安裝gh-pages套件


npm install gh-pages --save-dev

二、第二步-修改設定

修改vue.config.js





module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/<你的GitHub儲存庫名稱>/' // 替換成你的儲存庫名稱
    : '/dist'
};

修改package.json
編輯 package.json，在 scripts 中新增以下指令：




"scripts": {
  "build": "vue-cli-service build",
  "deploy": "npm run build && gh-pages -d dist"
}

三、第三步-部屬專案

推送專案至Github ==> 如果已有推送過這步驟可以省略







git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/<你的GitHub使用者名稱>/<儲存庫名稱>.git
git push -u origin main

打包專案
```
npm run build
```
部屬專案
```
npm run deploy
```

無法部屬時使用


npm run deploy -- --no-verify

四、補充

如果遇到突然無法部屬至Github可以這樣做

<branch-name>分支名稱如：gh-pages

遠端(Github)部分

切換到目標分支(遠端-Github)


git checkout <branch-name>

清除分支中的檔案(遠端-Github)


git rm -r --cached .

提交更改(遠端-Github)


git commit -m "清除遠端檔案"

推送更改至分支(遠端-Github)


git push origin <branch-name>

本地清除

切換到目標分支(本地)


git checkout <branch-name>

清除分支中的檔案(本地)


git rm -r *

提交更改(本地)


git commit -m "Clear all files in the branch"

如果希望同步推送至遠端(本地)


git push origin <branch-name>