---
# System prepended metadata

title: Vue Cli Deploy Github Pages

---

# 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會有驗證上問題
![](https://i.imgur.com/h03wwo4.png)

```
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 git@github.com:<USERNAME>/<REPO>.git master:gh-pages
修改為
# git push -f git@github.com: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 git@github.com:<USERNAME>/<REPO>.git master:gh-pages


git push -f git@github.com:RayChen1996/vue-sport-together-project.git master:gh-pages
cd -
```

## 7.Run
```
sh deploy
```