于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