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

使用Laravel作为Vue.js后端的一个缺点是无法由Vue.js 2.5.0的发布为非Node.js环境(包括PHP,Python,Ruby等)带来了服务器端的渲染支持。在本教程中,我将带您了解Laravel的设置步骤,并演示一个简单的服务器渲染应用程序。

使用Laravel和Vue.js2.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,我们将看到我们完全呈现的应用程序:

<div id="app">
  <ul>
    <li>Component 1</li>
    <li>Component 2</li>
    <li>
      <div>Component 3</div>
    </li>
  </ul>
</div>

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

<div id="app"></div>

为什么有这个差距呢?由于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特性。

npm i --save-dev vue@>=2.5.0 vue-server-renderer@>=2.5.0

Vue.js

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

<template>
  <div id="app">
    {{ message }}
  </div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'Hello World'
      }
    }
  }
</script>

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

import App from './components/App.vue';
import Vue from 'vue';
new Vue({
  el: '#app'
  render: h => h(App)
});

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

Mix配置

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

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

代码的片段的所在的位置–> webpack.mix.js
完成之后,您应该可以构建Vue.js app:

$ npm run dev
## Outputs to public/js/app.js

Blade view

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

<!doctype html>
<html lang="{{ app()->getLocale() }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue/Laravel SSR App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
  </body>
</html>

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

Controller and route

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

$ php artisan make:controller AppController

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

<?php
namespace App\Http\Controllers;
class AppController extends Controller
{
  public function get() {
    return view('app');
  }
}

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

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

代码的片段的所在的位置–> routes/web.php
完成后,我们现在应该能够从浏览器中查看app:
使用Laravel和Vue.js2.5进行服务器端渲染

服务器端渲染

我们在沙箱中运行的Vue.js应用程序与我们在浏览器中运行的应用程序略有不同,因为尽管使用相同的语言,但这些环境却完全不同。例如,沙箱中没有窗口或文档对象。

因此我们需要两个版本。 这些将尽可能相似,但会有一些小的差异。 我们将在app.js中保留任何常见的(即通用的)代码,我们将所以特定于环境的代码放入之后要创建的入口文件。

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

export default new Vue({
  render: h => h(App)
});

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

入口文件

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

$ touch resources/assets/js/entry-client.js resources/assets/js/entry-server.js

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

import app from './app'
app.$mount('#app');

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

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

代码的片段的所在的位置–> resources/assets/js/entry-server.js
我们现在需要更新我们的Mix配置,以便将两个新的入口文件中构建每个版本的应用程序:

mix
  .js('resources/assets/js/entry-client.js', 'public/js')
  .js('resources/assets/js/entry-server.js', 'public/js')
;

代码的片段的所在的位置–> webpack.mix.js
在你再次运行npm run dev之后,你将会拥有两个构建文件。我们需要更新我们的Blade view,以确保新的客户端构建文件被加载,而不是app.js:

<script src="{{ asset('js/entry-client.js') }}" type="text/javascript"></script>

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

Laravel

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

  1. vue-server-renderer模块和应用程序的服务器版本是从文件系统加载的。
  2. 输出缓冲打开。 这意味着脚本发送的任何输出都会在内部被捕获,而不是被打印到屏幕上。
  3. 将一些必要的环境变量传递给V8Js。
  4. 然后执行渲染器代码和服务器构建文件。 请记住,在entry-server.js中,我们使用print方法来输出内容。 这将被输出缓冲区捕获。
  5. 返回缓冲区内容并删除当前的输出缓冲区。
<?php
namespace App\Http\Controllers;
use Illuminate\Support\Facades\File;
class AppController extends Controller
{
  private function render() {
    $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 =
<<<EOT
var process = { env: { VUE_ENV: "server", NODE_ENV: "production" } };
this.global = { process: process };
EOT;
    $v8->executeString($js);
    $v8->executeString($renderer_source);
    $v8->executeString($app_source);
    return ob_get_clean();
  }
  public function get() {
    $ssr = $this->render();
    return view('app', ['ssr' => $ssr]);
  }
}

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

<body>
  {!! $ssr !!}
  <script src="{{ asset('js/entry-client.js') }}" type="text/javascript"></script>
</body>

代码的片段的所在的位置–> resoures/views/app.blade.php
有了这个,服务器端渲染正常运行! 但是,如果加载应用程序,可能不会注意到任何区别,因为本地服务器上的页面加载改进不会被察觉。 要确认它的工作原理,查看文件的来源,你会看到:
使用Laravel和Vue.js2.5进行服务器端渲染
而不是空的<div id =“app”>,我们的页面中有实际的内容。 请注意vue-server-renderer添加的特殊属性:data-server-rendered =“true”。 这样的,当Vue实例挂载时,而不是试图重新构建内容,而是尝试挂载它。

结论

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

 

原创文章,作者:webstack,如若转载,请注明出处:https://www.webstacks.cn/tutorial/1166.html

发表评论

登录后才能评论