今天花了挺多時間研究 Vue 多頁面,感覺還比較通用,自己之後也可能重複用到,就稍微整理下,放到 GitHub 上了:vue-multi-pages
說說背景和現狀。
由於 Vue 原生是針對單頁面設計的,vue cli 生成的項目也是單頁面的;在單頁面的前提下,很多配置都默認化了,開發者是無感的。而一旦拉出來成多頁面,很多隱藏在內部的、之前開發者不需要知道的配置,都需要知道並修改。
再加上官方並沒什麼指導,網上各種新舊版本交織,所以學起來比較累,也很難界定哪種是最佳實踐。如果能更多地閱讀 Vue 源碼,可能更容易判斷;不過估計絕大多數人並沒這個耐心和時間。
從技術上,大體有兩種實現方式:通過 pages 和 router;後者其實本質上還是單頁面,只是通過 router 使得表現上像是多頁面,更徹底的還是 pages 方式。
我就不展開講了,內行的直接看 代碼 就都明白了。這裡簡單列出一些點:
- 支持多級目錄
- 包含 router、vuex 示例
- 內置了全局 404 的大體實現
- 代碼中暫未包含私有及公共 Component 的示例,不過應該容易實現
- 參考了 vue-multiple-pages,並在其基礎上二次開發
說起來,不知道 Vue 3 會不會原生對多頁面支持得更好,期待。
博客原文:0226 - 開源了自己折騰的 Vue 多頁面框架