How to render a template in VueJS to be used on index.html

Question

We have Rails app with Webpacker that serves just the initial HTML file, after which the client will download everything (inc. vue .js and .css) files.

Our problem is that we want to display something initial on the html so the user will feel as the site already loaded. This logic is in the main vuejs component. Is there a way to offline render this so it will be easily be embedded on our index page? instead of having to maintain and re-write this everytime?

Answer 1

听起来，预渲染可能比完整的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。

祝你好运！