iT邦幫忙

2021 iThome 鐵人賽

DAY 29
1
自我挑戰組

Vue.js 從零開始系列 第 29

Vue.js 從零開始:Vue CLI / Gihub Pages

本篇為Vue CLI最後一篇,專案已經建立好,環境也有概略的說明,接下來當然是上傳到Gihub Pages,未來如果有自己作品集,就有網址可以提供。


1.編譯你的專案

開啟終端機,執行指令:

npm run build

編譯完成會產生一個dist的資料夾,點開dist資料夾之後直接開啟index.html,會發現裡面路徑是以根目錄的形式引入,例如/js/css
https://ithelp.ithome.com.tw/upload/images/20211008/20118347mrQjPHUjzy.png
開啟的index.html檔案畫面會變成一片空白,正確方式應該把dist資料夾放到vscodeLive Server的方式啟動,因為index.html是在dist裡面,以上會跟我們等等更改路徑有相關。

2.調整編譯後資料夾的路徑

首現要建立vue.config.js檔案,這邊我們使用Vue UI來建立,開啟終端機執行指令:

vue ui

執行完成會自動開啟Vue UI介面視窗:

https://ithelp.ithome.com.tw/upload/images/20211008/201183471Gx0pYZ8x3.png

公開路徑調整為/github儲存庫名稱/dist/並保存修改,Vue的專案就會多出一個vue.config.js檔案,裡面的內容就是透過Vue UI保存的設定:

module.exports = {
  publicPath: '/github儲存庫名稱/dist/'
}

回到終端機關閉Vue UI,並且重新執行npm run build再編譯一次,dist資料夾才會更新,這時我們再打開dist裡面的index.html,路徑已變成/side-project/dist
https://ithelp.ithome.com.tw/upload/images/20211008/20118347AeQRoJTDli.png

以上完成後,將.gitignore檔案裡的/dist刪除,否則推送Git會自動忽略。


3.推送至 Gihub Pages

首先到GitHub網站執行下列步驟:

  1. 創建一個新的遠端數據庫:
    https://ithelp.ithome.com.tw/upload/images/20211008/20118347YCwutRI3Aj.png

  2. Repository name輸入完名稱後。

  3. 點擊Create Repository

回到我們vscode終端機執行以下指令:


git add .
git commit -m "版本資訊"
git remote add origin git@github.com:遠端數據庫名稱.git
git branch -M main
git push -u origin main

不需要git init是因為Vue CLI已經幫我們建立好了,上傳完畢之後再回到GitHub,就會看到剛剛上傳的檔案,之後點選Settings滑到最下面點擊Check it out here!,來到這個畫面:
https://ithelp.ithome.com.tw/upload/images/20211008/20118347LXBprjloRw.png

點擊None切換成main之後儲存,會看到一個綠色框框,裡面有一個網址點擊進去,再把步驟2'/遠端數據庫名稱/dist/'貼到網址後面就可以正常顯示:
https://ithelp.ithome.com.tw/upload/images/20211008/20118347BLR7SGxlQ3.png

提醒:當你要下載別人專案或是自己的專案時,記得執行npm i,這樣才能正常運行,因為下載的時候不會包含node_modules資料夾,而指令npm i就是把package.json裡面有安裝的套件或是預設全部下載回來,產生
node_modules資料夾。

/images/emoticon/emoticon28.gif


參考資料

Github Pages - 免費網頁空間隨你開


上一篇
Vue.js 從零開始:Vue CLI 環境說明
下一篇
Vue.js 從零開始:Vue Router
系列文
Vue.js 從零開始30

尚未有邦友留言

立即登入留言