# 部署 Vue CLI 專案至 GitHub Pages

###### tags:`Vue CLI`

### step 1.
當專案使用 vue create 建立完成後，開啟專案，輸入 npm run build，會產生一個 dist 資料夾

### step 2.
一般情況下進入 git 的預設分支是 master，在 github 開新的儲存庫 (repository)，並將要部屬的分支由原先如下圖的 main 改成 master

也就是 git branch -M main 移除，即不建立新分支，直接布署在 master
git push - u origin main 改成 git push - u origin master。

在這邊就是輸入

git remote add origin [e-mail]:Steven-1220/2022_Vue_Task_Week7.git
git push -u origin master

其中 Steven-1220 是自己的帳號名稱，2022_Vue_Task_Week7 則是自己當時建立的儲存庫名稱。

### step 3.

參考 https://cli.vuejs.org/zh/guide/deployment.html#%E6%B7%B7%E5%90%88%E9%83%A8%E7%BD%B2

在 vue.config.js 檔案加入

publicPath: process.env.NODE_ENV === 'production'
? '/my-project/'
: '/'

其中 my-project 是自己在github 開新的儲存庫 (repository)的名稱。這邊的例子為2022_Vue_Task_Week7

### step 4.
建立好 deploy.sh檔案(跟vue.config.js 檔案 同一層) 以及加入

#!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建
npm run build

# cd 到构建输出的目录下
cd dist

# 部署到自定义域域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 部署到 https://<USERNAME>.github.io
# git push -f [e-mail]:<USERNAME>/<USERNAME>.github.io.git master

# 部署到 https://<USERNAME>.github.io/<REPO>
# git push -f [e-mail]:<USERNAME>/<REPO>.git master:gh-pages

cd -

上方的部屬到 https:// 的說明，建議選擇下方的

`git push -f [e-mail]:<USERNAME>/<REPO>.git master:gh-pages`

<USERNAME> 和 <REPO> 分別填入自己的**帳號名稱**和儲**存庫名稱**

這裡改成

`git push -f [e-mail]:Steven-1220/2022_Vue_Task_Week7.git master:gh-pages`

所以最後要加入的內容是

  #!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建
npm run build

# cd 到构建输出的目录下
cd dist

# 部署到自定义域域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'


# 部署到 https://<USERNAME>.github.io/<REPO>
git push -f [e-mail]:Steven-1220/2022_Vue_Task_Week7.git master:gh-pages


cd -  

### step 5.

執行 `sh deploy.sh`