使用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相比仍然是二流的,因为它现在可以服务器端渲染。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171211A0YV8300?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券