Vuejs2 在使用VueJS时，是否有一种推荐的方法可以将所有HTML预加载以用于SEO目的，而不使用SSR？

正如标题所暗示的，我需要可靠的SEO，因此我需要在初始加载时将所有HTML加载到我的站点上。但是，由于后端是用PHP编写的，而且在编写Vue组件时考虑到服务器会有更多的工作，所以我不想使用服务器端呈现（SSR）

这让我可以选择通过网络发送HTML，这是一种“老派”的方式。我想做的是像平常一样编写每个页面的HTML，但将其中一个根HTML元素设置为Vue元素以“升级”它。因此，初始加载将下载最终的HTML，其中包含所有数据（表、列表等），但在加载所有脚本之后，javascript可以接管，使事情变得更简单，并提供更好的UI体验。然而，这提出了几个问题：

• 我是否仅限于一个组件，根？如果仍然有许多子组件，每个子组件都有自己的状态，那就太好了。或许可以以某种方式使用内联模板
• Vue模板有自己的模板系统，比如用于显示变量的小括号

  {{myVar}

  。我不能使用它们吗？我能想到的一种方法是创建一个Vue模板（可以从外部脚本加载），该模板与它“接管”的HTML部分相同。缺点是我必须在原始HTML和vue模板中维护该组件

有没有什么好的例子可以说明我在这里想要实现的目标

---

编辑：我想澄清一下，我知道我可以在整个页面的各个地方加入不同的组件。这仍然提出了一个问题，即如何使这些组件开始渲染。更好的方法是将整个页面转换为Vue，就像SPA一样。

最近我使用Vue开发了一个多页面应用程序，下面是我如何尝试解决SEO问题的（也许这可以帮助您）：

页眉和页脚（以及其他主要的通用组件）的html被打包到

page.html

（例如：home.html、search.html）

脚本和样式是在

page.js

中导入的页眉和页脚（例如：home.js、search.js）

将

div.seo-zone

添加到

page.html

的

div#app

，其中包括主要的seo数据（使用一些h1、h2、p、div等），然后添加

.seo区{ 显示：无； }

在你的css中。 4.确保应用程序根组件的el为#app（每个页面的主要内容可以是Vue应用程序）

像往常一样开发你的应用程序

呈现Vue后，

div.seo-zone

将替换为您的Vue组件（尽管无法看到）

我需要坚实的搜索引擎优化，因此我需要有所有的HTML在我的网站上加载的初始负载

这并不完全正确。谷歌（80%的搜索流量）现在很容易解析SPA，因此不再需要纯粹用于SEO的SSR

但要回答您的一般问题，您应该查看该系列。他们深入讨论了如何将PHP与Vue.js结合使用（包括模板和变量）

---

我想问一下，您希望在页面中使用Javascript/Vue.js实现什么。如果所有内容都已在PHP中呈现，那么Vue是否提供了简单的UX增强功能，还是接管了页面的大部分繁重工作（导航等）？如果您没有反应性数据，并且希望Vue只是渲染组件的控制器，那么您就可以退出了，尽管这可能会出现“过度杀戮”的情况

您研究过Prerender SPA插件（）吗

---

Vue文档中提供了它，作为服务器端呈现（）的可行替代方法（）

，因此您需要为每个页面维护两个单独的版本吗？也就是说，您需要在.seo区域中呈现所有内容，并维护创建与.seo区域内容相同布局的vuejs组件？不完全是这样，.seo区域仅通过使用服务器端模板变量（例如：php smarty、twig…）呈现主seo数据，html布局不需要与vuejs组件保持一致，你可以使用h1，p等等，这不是一个好的解决方案。吸引处罚的一个好方法是在页面上隐藏SEO内容。即使你没有受到惩罚——应该注意的是，谷歌足够聪明，可以对“显示：无”块中的内容进行打折。不，如果你不使用SSR或Prerender，它不会爬行，不幸的是，我会回应Pierre在这里所说的。从个人经验来看，即使是最基本的没有异步内容的vue2应用程序，Google也经常无法正确呈现。您可以在您的站点上使用，以便自己查看。