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

服务器端渲染是一种很好的方式，可以增加你的全栈应用程序中加载速度的感知。用户在加载你的站点时可以得到一个完整的页面，而不是在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，我们将看到我们完全呈现的应用程序：

Component 1Component 2Component 3

但是，如果我们查看文档的来源，即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 镜像（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中。

{{ message }}exportdefault{data(){return{message:'Hello World'}}}

代码的片段的所在的位置--> resources/assets/js/components/App.vue我们的应用程序入口文件app.js只负责渲染组件并将其安装到模板中。在这里使用渲染函数而不是DOM模板是很重要的，原因很快就会清楚了。

importAppfrom'./components/App.vue';importVuefrom'vue';newVue({el:'#app'render:h=>h(App)});

代码的片段的所在的位置--> resources/assets/js/app.jsMix配置让我们建立一个Mix配置来建立入口文件。请注意，我覆盖了默认的Vue构建，以至于运行时构建。由于我们使用的是渲染函数和单文件组件，所以我们不需要模板渲染器。

letmix=require('laravel-mix');mix.js('resources/assets/js/app.js','public/js');mix.webpackConfig({resolve:{alias:{'vue$':'vue/dist/vue.runtime.common.js'}}});

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

Blade view

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

Vue/Laravel SSR App

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

Controller and route

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

$phpartisanmake:controllerAppController

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

代码的片段的所在的位置--> app/Http/Controllers/AppController.php我们在web.php添加一个调用此控制器方法的根路径的路由：

Route::get('/','AppController@get');

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

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

服务器端渲染

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

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

exportdefaultnewVue({render:h=>h(App)});

代码的片段的所在的位置--> resources/assets/js/app.js入口文件我们现在需要创建两个新的入口文件，一个用于浏览器（客户端），一个用于服务器。

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

importappfrom'./app'app.$mount('#app');

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

importappfrom'./app'renderVueComponentToString(app,(err,res)=>{print(res);});

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

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

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

代码的片段的所在的位置--> resoures/views/app.blade.phpLaravel我们现在终于到了服务器端的渲染功能。 添加一个新的方法渲染到AppController，它的工作原理是这样的：

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

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

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

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

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

namespaceApp\Http\Controllers;useIlluminate\Support\Facades\File;classAppControllerextendsController{privatefunctionrender(){$renderer_source=File::get(base_path('node_modules/vue-server-renderer/basic.js'));$app_source=File::get(public_path('js/entry-server.js'));$v8=new\V8Js();ob_start();$js=executeString($app_source);returnob_get_clean();}publicfunctionget(){$ssr=$this->render();returnview('app',['ssr'=>$ssr]);}}

代码的片段的所在的位置--> app/Http/Controllers/AppController.php从渲染返回的值将是我们的应用程序的服务器呈现的输出。 这是一个HTML字符串。 我们现在将这个分配给一个模板变量并将其发送给视图。 一定要跳过字符串转义通过使用{!! !!}大括号，所以HTML是按原样打印的。

{!! $ssr !!}

代码的片段的所在的位置--> resoures/views/app.blade.php有了这个，服务器端渲染正常运行！ 但是，如果加载应用程序，可能不会注意到任何区别，因为本地服务器上的页面加载改进不会被察觉。 要确认它的工作原理，查看文件的来源，你会看到：

而不是空的

，我们的页面中有实际的内容。 请注意vue-server-renderer添加的特殊属性：data-server-rendered =“true”。 这样的，当Vue实例挂载时，而不是试图重新构建内容，而是尝试挂载它。

结论

缺乏服务器端渲染而反对使用Laravel作为Vue.js后端的最大缺点之一。 由于需要一个沙盒，所以它与Node.js相比仍然是二流的，因为它现在可以服务器端渲染。