如何在 laravel 应用程序中为单个 vue 组件实现 s-s-r？

Posted 2023-02-23

【中文标题】如何在 laravel 应用程序中为单个 vue 组件实现 s-s-r？

【英文标题】：How to implement s-s-r for single vue component inside of laravel application?

【发布时间】：2019-08-01 16:38:59

【问题描述】：

我正在做一个 laravel 项目。 vue组件很多，由于SEO需要做s-s-r。我不能使用 nuxt.js 或类似的东西，因为我的应用不是 SPA。我有默认的混音设置：

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.sass', 'public/css');
mix.disableSuccessNotifications();

我将 vue 组件放到 laravel 视图（刀片模板）中，例如 <example-component></example-component>。只有在这种情况下，我如何才能为那里的组件实现 s-s-r？

由于 SEO，我需要将此组件作为呈现的 html 添加到响应中，而不是 <example-component></example-component>。

【问题讨论】：

s-s-r 是什么意思？

@arun 服务器端渲染

您可能不需要为 SEO 执行 s-s-r。只为 SEO 提供必要的信息就足够了。 Google 不认为这是在伪装。

@RaduDiță 在这里问问题之前，我在 webmasters.*** 上问过这个问题：webmasters.stackexchange.com/questions/121490 看看，我想我需要在这里做 s-s-r

这是一个很好的资源sebastiandedeyne.com/server-side-rendering-javascript-from-php

【参考方案1】：

服务端渲染不是单行的，但是有一个laravel的包可以做，请查看：

https://github.com/spatie/laravel-server-side-rendering

【参考方案2】：

目前的解决方案需要使用 Node，或者在极端情况下 PHP 与 V8Js 引擎结合使用。

请参阅https://s-s-r.vuejs.org/guide/#integrating-with-a-server 以帮助您入门。 vue-server-renderer 基于预先呈现 HTML 的 Node/express.js 实现。

我还没有尝试过任何基于 PHP 的解决方案，很遗憾，这是我目前能给你的最佳答案。

【讨论】：

我不会将 PHP 渲染器视为“极端情况”——您可以熟悉和分离让 s-s-r 完成您喜欢的事情。这就是为什么 RoR 和 Laravel 的包如此受欢迎的原因

【参考方案3】：

只使用刀片。不要使用 Vue 的组件。您可以将它们用于 Clawer、搜索引擎（如表单、付款、预订、购物车、结帐）等不必要的事情，