一個指令快速部署Vue Cli 到GitHub Pages | vue build部署
發表於2020-02-14分類於Vue[1]GoogleAD撰寫一篇文章其實真的很花時間,如果你願意「關閉Adblock(廣告阻擋器)」來支持我的話,我會非常感謝你ヽ(・∀・)ノLiker讚賞這篇筆記文章如果對你有幫助,你可以考慮花30秒登入LikeCoin並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。或者你可以也可以請我「喝一杯咖啡(Donate)」。|一般來說我們使用VueCli開發一個作品完畢之後都會需要部署到特定空間來展示作品,舉例來講GitHubPages就是一個,那麼這一篇就來介紹該如何一個指令快速部署吧。前言一般來說我們使用VueCli開發一個作品完畢之後都...
發表於 2020-02-14 分類於 Vue[1]Google AD
撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ
Liker 讚賞 這篇筆記文章如果對你有幫助, 你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。 或者你可以也可以請我「喝一杯咖啡(Donate)」。 |一般來說我們使用 Vue Cli 開發一個作品完畢之後都會需要部署到特定空間來展示作品,舉例來講 GitHub Pages 就是一個,那麼這一篇就來介紹該如何一個指令快速部署吧。
前言一般來說我們使用 Vue Cli 開發一個作品完畢之後都會需要部署到特定空間來展示作品,舉例來講 GitHub Pages 就是一個,那麼這一篇就來介紹該如何一個指令快速部署吧。
範例程式碼這邊將會使用我先前做的一個串接 API 範例作品,也就是「六腳音樂大平台[2]」
這個範例作品是我先前在六角學院[3]的線上問答會所介紹的範例作品,如果你對於 KKBOX OPEN API 非常感興趣的話也歡迎你可以參考這一支 Youtube 影片,這邊我就直接放上影片。
一鍵部署基礎教學首先我們通常要部署一個專案之前都會先輸入 npm run build,然後就會打包編譯出 dist 這個資料夾,如果你是用原始的方式,例如:cd dist … git init 次數多了其實也會煩,先前我的Vuejs部屬GitHub Pages 教學文章[4]就是教你這樣做,但是開發時我們通常會很長 npm run build,所以接下來就會教如何一個指令部署到 GitHub pages。
首先我們先在專案底下建立一個叫做 deploy.sh 的檔案,然後內容是以下
1234567891011121314151617181920212223242526272829#!/usr/bin/env sh# 發生錯誤時執行終止指令set -e# 打包編譯npm run build# 移動到打包資料夾下,若你有調整的話打包後...