Laravel 环境中设置SSR｜Vue高级服务器端渲染：多页应用程序

于Laravel的新的Vue服务器端渲染功能的教程。该教程主要集中在Laravel环境中设置SSR，所以我只有时间来演示一个简单的“Hello World”应用程序，没有显着的功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

现在我想要构建上一个教程，并演示如何使用Vue Router呈现包含多个页面的Vue应用程序，因为大多数Laravel项目都有多个页面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

安装文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

本教程将扩展在前一篇文章中使用Laravel＆Vue.js 2.5进行服务器端渲染的应用程序。确保你熟悉它的工作原理，并设置适当的开发环境，例如安装php-v8js扩展。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

如果您没有该代码，请克隆并设置它：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

$ git clone https://github.com/anthonygore/vue-js-laravel-ssr文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

$ cd vue-js-laravel-ssr文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

$ cp .env.example .env文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

$ composer install文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

$ npm i文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

然后安装Vue路由器：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

$ npm i --save-dev vue-router文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

路由器模块文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

我们将首先为我们的路由器配置创建一个文件，导出用于应用程序的路由器实例。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

我已经制作了一些示例路线，每个示例都显示了从该方法生成的组件pageComponent。这个工厂方法返回一个简单的组件，只不过是显示页面的名字。这就是我们需要证明的SSR路由工作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

resources/assets/js/router.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

import Vue from 'vue'文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

import Router from 'vue-router'文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

Vue.use(Router);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

function PageComponent(name) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

return {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

render: h =< h('h3', `Hello from the ${name} page`)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

};文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

export default new Router({文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

mode: 'history',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

routes: [文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

{ path: '/', component: PageComponent('Home'), name: 'home' },文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

{ path: '/about', component: PageComponent('About'), name: 'about' },文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

{ path: '/contact', component: PageComponent('Contact'), name: 'contact' }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

});文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

在主应用程序文件中，我们现在将导入路由器模块并将其添加到应用程序，就像在任何Vue项目中一样。然后将应用程序实例导出，以便在客户端和服务器条目文件中使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

resources/assets/js/app.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

import App from './components/App.vue';文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

import Vue from 'vue';文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

import router from './router'文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

export default new Vue({文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

router,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

render: h =< h(App)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

});文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

Laravel路线文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

请注意，我们的Vue路由器实例处于历史模式，因此当从导航栏刷新或加载子页面时，路由将回退到服务器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

这意味着我们在前端应用程序中创建的任何路线也需要在服务器端创建。他们都可以指向相同的控制器方法get：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

routes/web.php文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

>?php文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

Route::get('/', 'AppController@get');文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

Route::get('/about', 'AppController@get');文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

Route::get('/contact', 'AppController@get');文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

调节器文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

现在我们需要在控制器中设置多页SSR。这是对基本应用程序逻辑的修改，所以请确保您熟悉如何工作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

对于SSR多页面应用程序，我们需要告诉Vue服务器应用程序（在entry-server.js中定义）当前所请求的URL是什么。这将确保当应用程序在沙箱中加载时，它显示正确的页面组件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

要做到这一点，我们通过网址，即$request-<path()通过该render方法的get方法。然后，我们将url存储在全局javascript变量中url，当它在沙箱中运行时，将从vue服务器应用程序访问该变量。< p=""></path()通过该render方法的get方法。然后，我们将url存储在全局javascript变量中url，当它在沙箱中运行时，将从vue服务器应用程序访问该变量。<>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

app/Http/Controllers/AppController.php文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

>?php文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

namespace App\Http\Controllers;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

use Illuminate\Http\Request;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

use Illuminate\Support\Facades\File;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

use Illuminate\Routing\Route;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

class AppController extends Controller文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

private function render($path) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

$renderer_source = File::get(base_path('node_modules/vue-server-renderer/basic.js'));文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

$app_source = File::get(public_path('js/entry-server.js'));文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

$v8 = new \V8Js();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

ob_start();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

$js =文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

>>>EOT文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

var process = { env: { VUE_ENV: "server", NODE_ENV: "production" } };文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

this.global = { process: process };文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

var url = "$path";文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

EOT;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

$v8-<executestring($js);< p=""></executestring($js);<>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

$v8-<executestring($renderer_source);< p=""></executestring($renderer_source);<>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

$v8-<executestring($app_source);< p=""></executestring($app_source);<>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

return ob_get_clean();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

public function get(Request $request) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

$ssr = $this-<render($request-<path());< p=""></render($request-<path());<>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

return view('app', ['ssr' =< $ssr]);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

Vue服务器应用程序文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

最后一个主要步骤是修改Vue服务器应用程序，以便我们可以以编程方式设置URL，而不是等待用户执行此操作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

这样做的逻辑是在Promise回调函数中。以下是它的作用：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

• 通过推送全局变量将路由器设置为正确的URL url
• 当路由器准备就绪时，我们看到是否有任何页面组件正在被这个推送的结果显示，告诉我们路由是有效的。如果不是的话，我们就扔404。如果是这样，我们返回应用实例。

使用Promise是因为路由器异步加载。一旦这个Promise解决了，我们可以使用服务器渲染器方法renderVueComponentToString来SSR实例，并最终使用print返回到我们的Laravel环境的输出。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

resources/assets/js/entry-server.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

import app from './app'文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

import router from './router';文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

new Promise((resolve, reject) =< {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

router.push(url);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

router.onReady(() =< {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

const matchedComponents = router.getMatchedComponents();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

if (!matchedComponents.length) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

return reject({ code: 404 });文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

resolve(app);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

}, reject);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

.then(app =< {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

renderVueComponentToString(app, (err, res) =< {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

print(res);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

});文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

.catch((err) =< {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

print(err);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

});文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

应用文件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

多页面应用程序的SSR逻辑已经完成。让我们在页面中创建一些路由器链接，以便我们可以在浏览器中测试应用程序：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

resources/asset/js/components/App.vue文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

>template<文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

>div id="app"<文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

>h1<>/h1<文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

>router-view<>/router-view<文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

>router-link :to="{ name: 'about' }"/router-link<文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

>router-link :to="{ name: 'contact' }"/router-link<文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

>/div<文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

>/template<文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

>script<文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

export default {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

data() {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

return {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

title: 'Welcome To My Site'文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

>/script<文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

加载主页看起来像这样：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

真正的测试是访问导航栏中的路由，以便服务器路由处理请求，并希望SSR的应用程序。为此，请访问http://localhost:9000/about并检查源标记。正如你所看到的，它包括在正确的URL提供的应用程序：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13788.html