使用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前端知識；