vue專案使用github線上預覽

當你在公司與 IT 人員合作,你只需把製作好的靜態檔案交給 IT 人員,他們會幫你部署到雲端空間,可是如果你只是在家裡自己想展示一件作品在線上環境,那可以使用 github pages 完成簡單的部署。
像是: 範例網站

1.vue router.js請使用hash mode,不要使用history

export default new Router({
    mode: "hash",
    routes: []
})

2. 新增一隻擋案在根目錄叫做 deploy.sh,貼上以下內容,網址改成倉庫網址

set -e
yarn build
cd dist
git init
git add -A
git commit -m 'deploy'
git push -f ${倉庫位置} master:gh-pages
cd -

倉庫位置:
— 如果倉庫是使用「Clone with HTTPS」,就輸入網址,例如

$ git push -f https://github.com/JessicaHuang210/vue-spotify.git master:gh-pages

— 如果倉庫是使用「Clone with SSH」,就輸入位置,例如

$ git push -f git@github.com:JessicaHuang210/vue-spotify.git master:gh-pages

3. router中設定首頁的path為預設

{
    path: "",
    name: "Home",
    component:  () => import("./views/Home.vue")
}

4. vue.config.js中設置publicPath

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "/vue-spotify/" : "/"
}

5. 在package.jsonscript項目新增指令:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "start": "open http://localhost:8888 && PORT=8888 serve -s dist",
    "push_PROD": "sh deploy.sh prod" // add this line
}

6. 進入github中的專案,點選setting

往下捲動,找到GitHub Pages,打開source下拉選單,選擇gh-pages分支

選好之後,會產生一段網址 https://${你的github帳號}.github.io/${你的專案名稱}

7. 打開終端機,進入專案資料夾,執行剛剛的build指令,然後等他跑完(要跑很久)

$ cd vue-spotify
$ yarn build_PROD

8. 完整網址:https://${你的github帳號}.github.io/${你的專案名稱}
這樣,別人點這個網址就可以直接看到網站了!


注意:
如果沒有使用gh-pages分支,就會把原始碼整個部署成dist資料夾裡的東西,就無法版控原始碼了。
文章內容參考 Vue Cli 部署

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。