# Vue Cli Deploy Github Pages

## 1. 建立Cli專案

vue create vue-gh-pages
1. 選擇手動安裝 勾選Router
2.選3.X
3. Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)   選擇N
4.選擇Sass/Scss

Vue Cli Deploy：https://cli.vuejs.org/zh/guide/deployment.html#github-pages

確認專案可否運行

npm run serve

確認專案完整編譯

npm run build

## 2.Github開Repo，上傳專案 切記使用Github Desktop上傳用CommandLine會有驗證上問題

git remote add origin https://github.com/RayChen1996/vue-sport-together-project.git
git branch -M main
git push -u origin main

修改為

git remote add origin https://github.com/RayChen1996/vue-sport-together-project.git
git push -u origin master

npm run build

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

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

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

# git push -f [e-mail]:<USERNAME>/<REPO>.git master:gh-pages
修改為
# git push -f [e-mail]:RayChen1996/vue-sport-together-project.git master:gh-pages

## 3. 修正路徑
update `vue.config.js`

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/vue-sport-together-project/'
    : '/'
}

## 4.重新進行編譯

npm run build

5.查看index.html
格式化Code
Ctrl + alt + F
script路徑是否為/vue-sport-together-project/XXX

## 6.將部署轉成Deploy.sh快速部署

在專案下 新增 Deploy.sh 檔案 將以下程式碼 儲存 並執行

#!/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]:<USERNAME>/<REPO>.git master:gh-pages


git push -f [e-mail]:RayChen1996/vue-sport-together-project.git master:gh-pages
cd -

## 7.Run

sh deploy