vue如何接管预呈现的页面？

Question

我正在使用prerender-spa-plugin，效果很好！我很好奇vue如何设法检测预渲染。为什么不尝试像往常一样渲染其组件？

我试过寻找答案，但没有人在讨论vue如何实现这个目标。

Answer 1

据我所知，Javascript像往常一样启动并呈现组件。但是，页面包含之前已渲染的输出。因此，如果用户没有启用JS，它基本上是默认的HTML。在JS解析之后，DOM（或应用程序根df['NEW_SCORE'] = np.nan df.loc[df['GROUP_ID']==0,'NEW_SCORE'] = df.loc[df['GROUP_ID']==0,'SCORE'].apply(lambda x: 5.0*x+2).values.reshape(-1) df.loc[df['GROUP_ID']==1,'NEW_SCORE'] = df.loc[df['GROUP_ID']==1,'SCORE'].apply(lambda x: 6.0*x+2).values.reshape(-1) df.loc[df['GROUP_ID']==2,'NEW_SCORE'] = df.loc[df['GROUP_ID']==2,'SCORE'].apply(lambda x: 5.0*x+3).values.reshape(-1) df1 = df.groupby(['PERSON_ID','GROUP_ID']).mean() df_summary2 = df1.reset_index().pivot('PERSON_ID','GROUP_ID','NEW_SCORE') ）被清空，应用程序组件照常渲染。

预先填充的输出（HTML）没有CSS和图像，但是当这些块也加载到您的页面上时（希望快速且成功），所有内容都是美观的，随时可以查看。

Answer 2

嗯，我会尽力回答。

• prerenderer使用一个puppeteer插件打开一个chrome窗口，然后 打你的路线。然后，随着页面的呈现，它将生成一个 加载的HTML dom中的新HTML文件（它到底是怎么做的？不知道）。
• 新生成的页面将运行所有脚本。 Vue 组件就像是部分自行生成自己的HTML和js集的部分。
• 您可以使用以下命令检查渲染页面上的所有渲染组件： 检查元素。当您使用npm构建时，预渲染器会为您在路径中指定的所有路由生成HTML文件。 文件夹模式。您将所有域请求定向到现在的HTML化页面。
• 在Vue项目中运行的脚本仍然存在。它们将像您在Vue项目中运行时一样运行。除了基本的html，css和js外，其他所有内容都将相同。 希望这会有所帮助

Answer 3

Prerendering产生的HTML类似于Vue SSR产生的HTML。 Vue SSR的文档说明了Vue如何水合预渲染的HTML，我认为这可能是您正在寻找的解释。

Client Side Hydration