Vue.js vuejs SPA应用程序和预渲染（站点地图）指南

我已经阅读了很多关于预渲染以及如何在vue js应用程序中实现预渲染的文章。 我已成功地在vuejs应用程序上使用。在经历了一些配置方面的痛苦之后，我现在有了几个[routename].html文件（Hourra o/）

但现在我有点迷路了。 我正在寻找一般指导（如何）

预渲染页面应该用于客户端（因为它是html，速度会加快，但如何切换到vuejs客户端页面？），或者仅用于爬虫（如Google机器人）？ 如果爬虫试图访问某个页面，我是否应该将其重定向到预渲染页面

---

还有一个问题：我是否应该将这些预渲染页面添加到我的站点地图中

到目前为止，我得到的预渲染SPA页面首先是出于SEO原因。如果不预先呈现搜索引擎，则当使用浏览器调用页面时，机器人无法抓取javascript生成的内容。预渲染页面必须上载到服务器并链接到站点地图中。bot（不支持js）将调用预呈现的html页面。如果在浏览器启用js的情况下调用页面，javascript文件（加载在预渲染页面中，并且只要启用js）将接管并重新呈现页面

请记住，您可能需要一个.htaccess文件来将路由路径映射到重新渲染的文件。 可能看起来像：

# .htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

在我的应用程序中使用匹配的路由

/
/about
/work

---

谢谢你的回答。我有一个相同的情景。我使用预呈现页面进行搜索引擎优化（以便目标机器人爬虫）。但对于“人类”用户，由于一个问题，我不能使用预渲染页面。事实上，js并没有接管页面。我用正确的html看到我的UI，但页面看起来不再是被动的（链接被破坏，不触发导航，任何点击触发都不做任何事情）。。。因此，对于人类用户，我使用“empty”index.html（由vue自动生成），其中的视图由js动态创建。您是否签入了源代码，是否应该加载js和css文件？如何检查预渲染的页面？在我的例子中，它只在我的url（如domain.com/work）中有纯slug时才起作用，而不指定index.html1只是为了确保：如果你的url（在浏览器地址栏中）是https://domain.com/about=>浏览器加载根/index.html（由vue生成），然后加载所有捆绑js文件（/js/app.xxx.js，/js/chunk-vendor.xxx.js，…）所有css文件（/css/chunk.xxx.css）然后vue js处理该文件，导航到/about path，然后渲染视图。换句话说，预渲染的文件不用于人工用户否？回答第1部分：确保我预渲染了所有路由，并在每个HTML文件末尾添加了注释以供进一步调查。其工作原理如下：如果您调用website.com/about浏览器渲染rs about目录中的index.html。回复第2部分：如果你在chrome控制台中禁用js，你将获得预渲染的内容。如果启用js，vue将“接管”，你可以正常浏览你的应用程序/网站。通过chrome控制台检查源代码，显示该html文件在导航时不会更改（启用js）-这表明js在页面不重新加载的情况下正确地接管了路由。因此，所有js文件和css文件都加载到预呈现的HTML文件中。

/
/about
/work