使用Laravel和Vue.js2.5进行服务器端渲染

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

使用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元素：

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

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

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

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

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

V8Js是一个允许您在PHP环境中安装V8 Java运行时并创建这样的沙箱的项目。但是，直到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 Java引擎。毫无疑问，用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配置

让我们建立一个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的一部分，并且是从Java沙箱中获取东西回到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方法来输出内容。这将被输出缓冲区捕获。返回缓冲区内容并删除当前的输出缓冲区。

代码的片段的所在的位置--> 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相比仍然是二流的，但它现在可以工作了。想要学习web前端开发的同学，可以来成都web前端培训查看更多web前端知识；

使用Laravel和Vue.js2.5进行服务器端渲染相关推荐

Vue.js2.0开发环境搭建（三）
转载自 Vue.js2.0从入门到放弃---入门实例(三) 今天就来简单说一下vue-resource,这是vue的一个与服务器端通信的HTTP插件,用来从服务器端请求数据.话不多说,直接上干货吧. ...
关于Vue.js2.0生命周期的研究与理解
写在前面:进行一些项目实践的时候,总会涉及到关于生命周期钩子或多或少的使用.因此觉得有必要单独梳理一下相关的知识点,如有理解错误的地方恳请告知修改. 总体感知首先贴一张Vue文档给出的生命周期图示, ...
基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+
2019独角兽企业重金招聘Python工程师标准>>> ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方 ...
Vue.js2.0开发环境搭建（一）
转载自 Vue.js2.0从入门到放弃---入门实例(一) 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题 ...
用Docker搭建Laravel和Vue项目的开发环境
在这篇文章中我们将通过Docker在个人本地电脑上构建一个快速.轻量级.不依赖本地电脑所安装的任何开发套件的可复制的Laravel和Vue项目的开发环境(开发环境的所有依赖都安装在Docker构建容器 ...
Vue.js 服务器端渲染指南
默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器. 简单理解是将组件或页面通过服务器生 ...
视频教程-德国Vue.js2终极开发教程（含Vue路由和Vuex）-Vue
德国Vue.js2终极开发教程(含Vue路由和Vuex) * Academind GmbH创始人,当前生活在德国慕尼黑 * 从15岁开始进入开发领域,前后端技术均很精通,毕业于慕尼黑大学硕士学位 * ...
德国Vue.js2终极开发教程（含Vue路由和Vuex）-Max-专题视频课程
德国Vue.js2终极开发教程(含Vue路由和Vuex)-808人已学习课程介绍新手入门现代前端开发的不二选择课程目标: * 学会从简单到复杂企业级应用的VueJS程序编写方法 ...
服务器端渲染-Vue SSR搭建
阅读建议:建议通过左侧导航栏进行阅读文章简介:本文是Vue.js服务器端渲染的另一种解决方案-SSR(Server-Side Rendering)学习笔记 Vue SSR是什么官方文档解释:Vue ...
vue php聊天室,实时聊天室：基于Laravel+Pusher+Vue通过事件广播实现
之前有说过要整理出一篇事件广播的教程,今天终于有时间把这篇文章给写了出来,本次的教程是基于Laravel+Pusher+Vue,以事件广播作为核心技术,让你可以快速搭建起一个实时聊天室应用,话不多说, ...

使用Laravel和Vue.js2.5进行服务器端渲染

使用Laravel和Vue.js2.5进行服务器端渲染相关推荐

最新文章

热门文章