15 - Vue3 UI Framework - 完工部署

Jeremy.Wu發表於2021-12-27
VueUIFramework

專案官網也基本完成了，接下來我們再講一下如何將專案官網部署到 GitHub Pages 上

返回閱讀列表點選 這裡

專案配置

常見的模式有三種,即

  • History 模式
  • Hash 模式
  • Memory 模式

在我們的專案中採用的是 vue-router， vue-router 有兩種模式， 即 History 和 Hash 模式。

三者的區別與聯絡這裡不再贅述，感興趣的小夥伴可以自行查詢。

為了簡單快捷的部署，這裡我們採用 Hash 模式將專案官網部署到 GitHub Pages

注意

不同的模式下，預設引用路徑和 vue-router 的配置不同

  • History 模式
    • vite.config.ts 中的 base 欄位為 '/'
    • src/router.ts 中的 history 為 createWebHistory
  • Hash 模式
    • vite.config.ts 中的 base 欄位為 './'
    • src/router.ts 中的 history 為 createWebHashHistory

打包構建

配置好以後打包構建即可，在此之前我們需要先配置一下 build 之後檔案的預設引用路徑。

開啟 vite.config.ts ，更新 export default 物件屬性如下:

export default {
    base: './',  //預設引用路徑
    assetsDir: 'assets',
}

注意

我們要將專案部署到 GitHub Pages , 所以我們需要使用 hash 模式

更新 vite.config.ts 中的 base 欄位為 './'

更新 src/router.ts 中的 history 為 createWebHashHistory

在執行完 npm run build 之後，dist 目錄生成如下檔案：

image-20211227092019748

這些檔案就可以部署了。

部署

我們可以根據自己的實際情況進行選擇部署，通常有如下幾種選擇：

  1. GitHub Pages
  2. Gitee Pages
  3. 自己的伺服器

GitHub Pages 伺服器在國外，國內訪問比較慢，有時候會打不開。重新提交程式碼部署後會自動更新部署頁。

Gitee Pages 伺服器在國內，國內訪問比較快。重新提交程式碼部署後不會自動更新部署頁，需要手工更新。

自己的伺服器，隨意 ?

自動化部署指令碼

為了後續的方便部署，我們這裡建立一個自動化部署指令碼，實現一鍵部署：

在專案的根目錄下建立 publish-github-pages.sh 檔案，內容如下：

rm -rf dist &&
npm run build &&
cd dist &&
git init &&
git add . &&
git commit -m "update and publish jeremy-ui" &&
git branch -M publish &&
git remote add origin git@github.com:JeremyWu917/jeremy-ui.git &&
git push -f -u origin publish &&
cd -
echo https://jeremywu917.github.io/jeremy-ui/index.html

注意

如果你的部署完成後無法開啟介面，那麼要先確認下 build 後生成的檔案是否加密了，先解密後再上傳試試 ?

部署完成後就可以在 GitHub 對應的 repo 裡 Pages上看到了。

現在我們就可以通過 https://jeremywu917.github.io/jeremy-ui/ 進行官網的訪問了 ?

image-20211227102944282

專案地址 ?

GitHub: https://github.com/JeremyWu917/jeremy-ui

官網地址 ?

JeremyUI: https://ui.jeremywu.top

感謝閱讀 ☕

相關文章