时间戳

首页 > 解决方案 > 如何在 VueJS 中渲染模板以用于 index.html

vue.js - 如何在 VueJS 中渲染模板以用于 index.html

问题描述

我们有带有 Webpacker 的 Rails 应用程序，它只提供初始 HTML 文件，之后客户端将下载所有文件（包括 vue .js 和 .css）文件。

我们的问题是我们想在 html 上显示一些初始的东西，这样用户就会觉得网站已经加载了。这个逻辑在主要的 vuejs 组件中。有没有办法离线渲染它，以便它可以很容易地嵌入到我们的索引页面中？而不必每次都维护和重新编写？

标签： vue.js

解决方案

听起来预渲染可能比完整的 SSR 更适合您。由于您已经在使用 Webpack，因此有一个插件可以帮助实现这一目标prerender-spa-plugin：https ://github.com/chrisvfritz/prerender-spa-plugin

这个插件背后的想法是，作为构建过程的一部分，它使用 Puppeteer（即无头 Chrome）预渲染生成的 SPA 的静态 HTML，并将其放入静态 HTML 文件夹中。它维护指向您的 SPA 代码的链接，因此它仍然可以正常工作，只是在用户点击它时完全呈现。

我怀疑你想尝试的是以下内容：

  1. 添加prerender-spa-plugin到您的webpack.config.js
  2. 配置插件以预渲染您的初始路由和任何其他真正静态的路由
  3. 将生成的文件输出到 Rails 应用程序用来分发静态资源（HTML、CSS、图像等）的文件夹

对于真正的静态路由，如登录页面或营销页面，采用预渲染路由实际上在技术上优于 SSR。您无需在 Rails 服务器上进行复杂的预渲染设置，将内容分发卸载到静态文件夹（即 Rails 服务器上的负载较小），您仍然可以使用 SPA 的所有好处。

话虽如此，如果您强烈认为确实需要成熟的 SSR，则通常“接受”的方法是滚动 Node.js 服务器（https://ssr.vuejs.org/）。如果您决定走这条路，我会将您的 SPA 资产保存在与 Rails 服务器分开的 Git 存储库中，并适当地管理 DevOps。

祝你好运！

推荐阅读