使用Laravel和Vue.js 2.5进行服务器端渲染

webstack前端栈 08-27 912

前言：

今天姐妹们对“php渲染内存溢出”大体比较关切，你们都想要知道一些“php渲染内存溢出”的相关内容。那么小编也在网络上汇集了一些对于“php渲染内存溢出””的相关知识，希望兄弟们能喜欢，小伙伴们快快来学习一下吧！

服务器端渲染是一种很好的方式，可以增加你的全栈应用程序中加载速度的感知。用户在加载你的站点时可以得到一个完整的页面，而不是在JavaScript运行之前没有填充的空白页面。

使用Laravel作为Vue.js后端的一个缺点是无法由Vue.js 2.5.0的发布为非Node.js环境（包括PHP，Python，Ruby等）带来了服务器端的渲染支持。

在本教程中，我将带您了解Laravel的设置步骤，并演示一个简单的服务器渲染应用程序。并且你可以在Github上获取该项目代码（）。

快速概述服务器端渲染

如果您不熟悉服务器端渲染（SSR），下面就有一个简单的例子可以快速带你入门：假设我们有一个由组件构建的Vue.js应用程序。如果我们使用浏览器的开发工具在页面加载后查看页面DOM，我们将看到我们完全呈现的应用程序：

但是，如果我们查看文档的来源，即index.html，就像服务器发送的那样，您将看到它只有我们的mount元素：

为什么有这个差距呢？由于JavaScript负责构建页面，而且事实上JavaScript必须在页面构建之前运行。而服务器刚下载内容，所以页面就没有内容。

但是在服务器端渲染的时候，我们的页面包含了浏览器的JavaScript下载并运行JavaScript之前建立一个DOM所需要的HTML，也就是页面源代码看起来像上面的第一个例子。这是通过在服务器上运行Vue.js应用程序并捕获输出，然后在将输出注入页面之前将其发送给用户来实现的。

使用SSR，您的应用程序无法加载或运行速度更快，实际上它可能会稍微慢一些，因为服务器具有渲染应用程序的额外任务。但页面内容更早显示，用户可以更快地看到页面。

为什么Laravel到现在还不能做Vue SSR？

显然，SSR需要服务器上的JavaScript环境，因为Vue应用程序是由JavaScript构成的。对于像PHP，Ruby和Python这样的非Node.js后端，必须从服务器派生出一个JavaScript沙盒来运行Vue应用程序并生成一个输出。

V8Js是一个允许您在PHP环境中安装V8 JavaScript运行时并创建这样的沙箱的项目。但是，直到Vue版本2.5.0，这仍然不够，因为Vue SSR需要某些Node.js API才能正常运行。最近的更新已经确保服务器渲染器是“environment agnostic”，因此可以在Node.js，V8Js，Nashorn等中运行。

Vue / Laravel SSR演示

现在让我们在Laravel应用程序中获得Vue SSR的简单演示。

环境

php-v8js是PHP扩展，可以访问Google的V8 Javascript引擎。毫无疑问，用PHP设置Vue SSR最棘手的部分是安装V8Js。由于我有限的Linux知识，实际上花了我几个小时才能使其工作。如果你有一些开发技能，你可以尝试自己安装。如果没有，我建议你使用这个Docker 镜像（），然后安装Laravel。

安装依赖关系

一旦你的PHP扩展工作，并有一个新的Laravel项目，你就需要安装Vue和vue-server-renderer。而且您还需要一个Vue.js 2.5.0的最低版本以获得环境未知的SSR特性。

Vue.js

让我们从设置一个简单的全栈Vue.js/Laravel app开始。这还没有任何SSR功能，但我们要奠定我们需要的基础。首先，我们将把应用程序的主要功能放到一个单一文件组件App.vue中。

代码的片段的所在的位置--> resources/assets/js/components/App.vue

我们的应用程序入口文件app.js只负责渲染组件并将其安装到模板中。在这里使用渲染函数而不是DOM模板是很重要的，原因很快就会清楚了。

代码的片段的所在的位置--> resources/assets/js/app.js

Mix配置

让我们建立一个Mix配置来建立入口文件。请注意，我覆盖了默认的Vue构建，以至于运行时构建。由于我们使用的是渲染函数和单文件组件，所以我们不需要模板渲染器。

代码的片段的所在的位置--> webpack.mix.js

完成之后，您应该可以构建Vue.js app：

Blade view

我们需要一个Blade模板来将我们的Vue app交付给浏览器。确保包含一个空的div和 id="app"将作为安装元素。另外，还包含构建脚本。

代码的片段的所在的位置--> resources/views/app.blade.php

Controller and route

我们来创建一个新的controller class ，它很快就包含服务器渲染应用程序的逻辑。

首先，我们将创建一个方法获取，将返回我们的应用程序视图：

代码的片段的所在的位置--> app/Http/Controllers/AppController.php

我们在web.php添加一个调用此控制器方法的根路径的路由：

代码的片段的所在的位置--> routes/web.php

完成后，我们现在应该能够从浏览器中查看app：

服务器端渲染

我们在沙箱中运行的Vue.js应用程序与我们在浏览器中运行的应用程序略有不同，因为尽管使用相同的语言，但这些环境却完全不同。例如，沙箱中没有窗口或文档对象。因此我们需要两个版本。这些将尽可能相似，但会有一些小的差异。我们将在app.js中保留任何常见的（即通用的）代码，我们将所以特定于环境的代码放入之后要创建的入口文件。

在app.js中，我们从Vue config中删除el属性，因为它在服务器环境中没有任何意义，而且该应用程序没有要挂载文件。我们还将这个文件导出app实例，然后导入到我们的入口文件中。

代码的片段的所在的位置--> resources/assets/js/app.js

入口文件

我们现在需要创建两个新的入口文件，一个用于浏览器（客户端），一个用于服务器。

客户端入口将简单地重新实现我们刚刚从app.js中删除的功能，将它引入并将其挂载到模板。

代码的片段的所在的位置--> resources/assets/js/entry-client.js

服务器入口文件更有趣一些。首先，它调用一个全局方法renderVueComponentToString。这个方法由vue-server-renderer公开，我们将很快介绍到我们的SSR设置。其次，它调用一个方法打印。这个方法是V8Js API的一部分，并且是从JavaScript沙箱中获取东西回到PHP环境的机制。

代码的片段的所在的位置--> resources/assets/js/entry-server.js

我们现在需要更新我们的Mix配置，以便将两个新的入口文件中构建每个版本的应用程序：

代码的片段的所在的位置--> webpack.mix.js

在你再次运行npm run dev之后，你将会拥有两个构建文件。我们需要更新我们的Blade view，以确保新的客户端构建文件被加载，而不是app.js：

代码的片段的所在的位置--> resoures/views/app.blade.php

Laravel

我们现在终于到了服务器端的渲染功能。添加一个新的方法渲染到AppController，它的工作原理是这样的：

vue-server-renderer模块和应用程序的服务器版本是从文件系统加载的。

输出缓冲打开。这意味着脚本发送的任何输出都会在内部被捕获，而不是被打印到屏幕上。

将一些必要的环境变量传递给V8Js。

然后执行渲染器代码和服务器构建文件。请记住，在entry-server.js中，我们使用print方法来输出内容。这将被输出缓冲区捕获。

返回缓冲区内容并删除当前的输出缓冲区。