15 - Vue3 UI Framework - 完工部署

項目官網也基本完成了，接下來我們再講一下如何將項目官網部署到 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 目錄生成如下文件：

這些文件就可以部署了。

部署

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

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 [email protected]: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/ 進行官網的訪問了 🚀

項目地址 🎁

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

官網地址 🌍

JeremyUI: https://ui.jeremywu.top

感謝閱讀 ☕