vue.js - Nuxt Prerender 与 Thymeleaf 不匹配

Question

我有一个奇怪的问题。这是上下文。我们的团队负责公司的 SEO 页面。我们有这些带有 angularjs 的页面。这个框架根本不是 SEO 友好的，所以我们最近决定使用 Nuxt 迁移到 vuejs。目前，我们没有可用的 SSR，所以我们进行了预渲染。我们使用 java 作为后端，我们还使用 thymeleaf 来进行前后通信。

问题是，我们在代码中包含了 thymeleaf 标签（例如

<p th:text=${‘test’}>

当我们预渲染页面（创建 dist 文件夹）时，这个标签保留在 html 中（如预期的那样）。我们使用 JBOSS 服务页面，现在我们遇到了下一个问题：当页面渲染时，thymeleaf 替换 var，如果我们打开“查看源代码”（测试

）。然而，客户看到的是带有 thymeleaf 变量的代码（

<p th:text=${‘test’}>

）。我想，这个问题与虚拟 DOM 有关。webpack 创建一个将 dom 与文本相关联的包。nuxt 中是否有任何方法可以避免创建虚拟 DOM 并让 thymeleaf 保留这些替换？

非常感谢

标签： vue.jsthymeleafnuxt.js