如何让我的 Vue.js 代码可以被搜索引擎索引？答案

【问题标题】：How to make my Vue.js code indexable by search engines?如何让我的 Vue.js 代码可以被搜索引擎索引？
【发布时间】：2021-11-03 13:46:59
【问题描述】：

我使用 Vue.js（CDN 版本不是 CLI）创建了一个网站的一部分，它是一个目录，条目根据位置等加载。

现在，我发现数据是不可索引的，因为它是在前端加载的。并搜索了一下，我想必须使用 NUXT.JS 在服务器上编译这些数据，以便搜索引擎也可以看到这些数据并对其进行索引。

我只是不知道使用 CLI 的 nuxt.js 是否可以作为 vue.js 项目的一部分嵌入，因此我只能在服务器端加载这些数据，而项目的其余部分则留在 vue.js (CDN) 中或，必须使用 nuxt.js 重建整个页面吗？

【问题讨论】：

您好，有很多方法可以实现您的要求。同时，我将从 2 个问题开始： 1. 为什么要为 Vue 使用 CDN（贵公司的任何特定限制或类似情况）？询问是因为与使用 CLI 创建的托管版本相比，它的性能较差。 2. 将它作为一个完整的 Nuxt 应用程序会有问题吗？您可以获得一些服务器生成的页面，而其他一些页面仅作为 SPA（如果 SEO 在那里无关）。
@kissu 关于第一个问题，我想说，我开始学习 vue.js 并发现 CDN 比 CLI 更容易，并且在我学习 vue.js 关于第二个问题时做到了，我是有点害怕nuxt，因为我不知道如何在服务器上运行它，而且我不确定是否必须完全重建它？还是只能重建至少这个唯一的页面？它可以像 vue.js cdn 一样使用吗？因为我使用它制作零件并将它们作为 WP 短代码加载到页面中。
@kissu 实际上，我只需要解决 SEO 问题，以便搜索引擎可以看到这些目录条目，但我不想使用 nuxt.js 重建侧边栏地图或过滤器或其他部分再次
哦，等等，您正在使用带有 Vue CDN 的 Wordpress？在回答之前没看到这个。嗯，这有点复杂。甚至不确定某些预渲染会如何表现......

【解决方案1】：

如果你想有预渲染的内容，你可以使用像prerender.io这样的服务，如官方文档中解释的那样：https://ssr.vuejs.org/#what-is-server-side-rendering-ssr
请记住，这与 SSG/SSR 不同，并且在某些方面低于标准。

您也可以使用Gridsome，但这并没有那么快，而且 Nuxt 确实有一个更大的社区。p>

如果您没有任何限制，您可能应该使用通过 CLI 生成的项目。这仍然是使用 Vue/Nuxt 的最production-瞄准的方式。
使用 CDN 确实有几个缺点。

您不必害怕 Nuxt。首先输入npx create-nuxt-app my-cool-project 并检查您想要使用的内容。完成后，瞄准documentation 并开始阅读它的一些功能。

您可能需要ssr: true（默认值）和target: 'static'。 yarn && yarn dev 然后是使用fetch() or asyncData() hooks 的问题。

您不需要全部使用它们，您可以在不知不觉中为您完成所有应用服务器端生成（称为 SSG）。

实际上，只有当您确实遇到问题时，您才需要了解正在发生的事情。在大多数情况下，您可以遵循约定并继续将其用作 Vue 应用程序。

我看到一些对 Nuxt 完全陌生的人，他们在几个小时内成功地从 Vue（CLI）迁移，没有任何问题。当然，这取决于您的舒适程度和应用程序的复杂程度，但这是完全可行的。

PS：你需要知道 Nuxt 目前只与 Vue2 兼容。在NuxtNation 期间将在两周内推出更多内容。

另外，我每天都在看nuxt 标签，所以你完全可以回到这里并发布一个格式正确的问题，我可能会帮助你解决你的问题（我是 Nuxt.js大使）。如果没有，我会派你到合适的人/地方来调试你的问题。

【讨论】：