如何防止 Vue.js 覆蓋預渲染的 HTML 文本內容？

Question

我的站點僅將 Vue.js 用於某些組件（不適用於整個站點或頁面）。 該站點本身是用 Python 編寫的，並在服務器端呈現。 在服務器端完成的一件事是解析 HTML 標簽中的所有文本內容 - 文本內容充當鍵，將被轉換為鍵的值（例如<h1>^Default heading^</h1>將變為<h1>Actual heading</h1> ）。 由於我的 Vue.js 應用程序在客戶端呈現到應用程序的容器 div 中，因此 Vue 應用程序的所有文本內容在 SSR 期間都不會被翻譯器修改。

因此，當前的解決方案是在 Vue 應用程序之外定義一個 JS object，方法是添加 Vue 應用程序使用的所有文本內容（例如 {defaultHeading: ^Default heading^}。Vue 應用程序然后使用該對象的鍵（已通過翻譯）解析器）用於數據綁定。這個解決方案的問題是它會生成毫無意義的額外代碼並使代碼維護變得更加困難（每次 Vue 應用程序添加/刪除文本元素時，它還必須反映在定義的 JS object在 Vue 應用程序之外）。

這導致我測試我的 Vue 應用程序的預渲染（SSR 可能不是，因為服務器沒有使用 Node.js）。 預渲染生成了應用程序的 HTML 代碼和文本元素在 SSR 期間根據需要翻譯，但在 Vue 應用程序本身安裝后，翻譯的文本內容被 Vue 應用程序的值替換 - 所以<h1>^Default heading^</h1>我從預渲染中得到的變成<h1>Actual heading</h1>並且在安裝 Vue 應用程序后它又回到<h1>^Default heading^</h1> 。

在使用預渲染的 HTML 時，有沒有辦法防止某些文本值被 Vue 應用程序覆蓋？ （或者也許有比為我的目標預渲染更好的方法？）

Answer 1

是否在您安裝應用程序的 id 旁邊的預渲染頁面中包含此標簽？ （通常是 id="app"）

data-server-rendered="true"