Vue3 與純 HTML 在部署與錨點導航上的差異

目錄

• 前言
• 1. Vue3 的部署與錨點導航較為複雜
• 2. 純 HTML 天然支援錨點導航
• 3. 手機瀏覽時錨點可能會發生偏移
• 4. 實務選擇：文章網站適合 HTML；求職時可使用 Vue3 展現能力
• 5. 結論

前言

在進行網頁開發時，若只是用來撰寫文章或展示資訊，
選擇使用 Vue3 或純 HTML 會影響部署難度、錨點導航行為、分享連結體驗以及行動裝置的瀏覽效果。
以下是兩者之間完整的技術比較與實務分析。

1. Vue3 的部署與錨點導航較為複雜

Vue3 是單頁式應用（SPA），所有畫面更新都透過 JavaScript 控制，因此在部署與錨點上會比純 HTML 複雜得多：

• 部署前需要進行打包（build）。
• Vue Router 會占用 URL 的 #，與 HTML 的錨點語法衝突。
• 使用錨點導航時，網址列不會顯示對應的 #id。
• 分享網址後無法直接跳至指定區塊，使用者都會從頁面頂端開始閱讀。
• 要實現錨點跳轉必須撰寫額外的 JavaScript 或設定 scrollBehavior。

因此在 Vue3 中，想達成與 HTML 相同的「網址帶 #id 即可自動跳轉」需要額外實作。

2. 純 HTML 天然支援錨點導航

純 HTML 的錨點是瀏覽器原生功能，幾乎不需要任何設定即可使用：

• 使用 <a href="#section"> 就能跳轉。
• 網址列會自動更新成對應的錨點。
• 分享網址後，接收者開啟頁面會直接跳到指定位置。

因此在以閱讀為主的網站中，HTML 提供更直覺、穩定且方便的使用體驗。

3. 手機瀏覽時錨點可能會發生偏移

無論是 HTML 或 Vue3，只要是在行動裝置上，錨點都可能因瀏覽器介面高度或排版行為而發生偏移：

• 手機瀏覽器上下工具列出現與隱藏造成跳轉位置不一致。
• 固定定位（fixed）的 header 可能遮住錨點位置。
• 不同手機的安全區域（safe area，瀏海區）也會造成偏移。

雖然移除 <meta name="viewport"> 能降低偏移，但這會使 RWD（響應式設計）失效，
字體會在小螢幕變得極小，不利閱讀，因此不建議這麼做。

4. 實務選擇：文章網站適合 HTML；求職時可使用 Vue3 展現能力

如果網站目標是提供文章、內容展示、說明文件等資訊型內容，
那麼純 HTML 能帶來最佳效能、最佳閱讀體驗與最簡單的部署流程。

不過，若這個網站同時是你的求職作品集的一部分，僅用 HTML 可能會讓面試官誤以為：

「你只會寫靜態 HTML，不會使用現代前端框架。」

為了避免這種誤解，也為了展示自己具備更完整的前端能⼒，你可以：

• 另外使用 Vue3 重寫同樣內容的版本。
• 展示組件化架構（Components）。
• 運用 Composition API。
• 設定 Vue Router 與基本頁面切換。
• 示範打包（build）與部署流程。

雖然 Vue3 的部署較複雜，錨點也需要額外處理，但對於面試官來說，
這能清楚展現你不只會寫 HTML，而是了解現代前端開發的工程化流程。

5. 結論與技術決策

• 導航策略：在 Vue3 中建議使用 scrollBehavior 設定，或 CSS 的 scroll-margin-top 來解決標題遮擋問題。
• 平衡點：可以將「說明文件」用 HTML 撰寫以利閱讀，而「核心功能」使用 Vue3 實作，達到技術展示與體驗的最佳平衡。