vuephp衬着技巧_运用Laravel和Vuejs 25进行做事器端衬着

做事器端渲染是一种很好的办法，可以增加你的全栈运用程序中加载速率的感知。
用户在加载你的站点时可以得到一个完全的页面，而不是在JavaScript运行之前没有添补的空缺页面。

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

在本教程中，我将带您理解Laravel的设置步骤，并演示一个大略的做事器渲染运用程序。
并且你可以在Github上获取该项目代码（https://github.com/anthonygore/vue-js-laravel-ssr）。

如果您不熟习做事器端渲染（SSR），下面就有一个大略的例子可以快速带你入门：假设我们有一个由组件构建的Vue.js运用程序。
如果我们利用浏览器的开拓工具在页面加载后查看页面DOM，我们将看到我们完备呈现的运用程序：

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

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

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

利用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等中运行。

现在让我们在Laravel运用程序中得到Vue SSR的大略演示。

php-v8js是PHP扩展，可以访问Google的V8 Javascript引擎。
毫无疑问，用PHP设置Vue SSR最棘手的部分是安装V8Js。
由于我有限的Linux知识，实际上花了我几个小时才能使其事情。
如果你有一些开拓技能，你可以考试测验自己安装。
如果没有，我建议你利用这个Docker 镜像（https://hub.docker.com/r/doctorlove/docker-php-apache-v8js-node/），然后安装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配置来建立入口文件。
请把稳，我覆盖了默认的Vue构建，以至于运行时构建。
由于我们利用的是渲染函数和单文件组件，以是我们不须要模板渲染器。

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

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

Blade view

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

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

我们来创建一个新的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

我们现在终于到了做事器真个渲染功能。
添加一个新的方法渲染到AppController，它的事情事理是这样的：

vue-server-renderer模块和运用程序的做事器版本是从文件系统加载的。

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

将一些必要的环境变量通报给V8Js。

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

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

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

从渲染返回的值将是我们的运用程序的做事器呈现的输出。
这是一个HTML字符串。
我们现在将这个分配给一个模板变量并将其发送给视图。
一定要跳过字符串转义通过利用{!! !!}大括号，以是HTML是按原样打印的。

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

有了这个，做事器端渲染正常运行！
但是，如果加载运用程序，可能不会把稳到任何差异，由于本地做事器上的页面加载改进不会被察觉。
要确认它的事情事理，查看文件的来源，你会看到：

而不是空的<div id =“app”>，我们的页面中有实际的内容。
请把稳vue-server-renderer添加的分外属性：data-server-rendered =“true”。
这样的，当Vue实例挂载时，而不是试图重新构建内容，而是考试测验挂载它。

缺少做事器端渲染而反对利用Laravel作为Vue.js后真个最大缺陷之一。
由于须要一个沙盒，以是它与Node.js比较仍旧是二流的，由于它现在可以做做事器端渲染。