Автор оригинала: Anthony Gore.
Несколько недель назад я написал учебное пособие на новые возможности рендеринга на стороне Vuue Server для Laravel. Это учебное пособие в основном сосредоточено на создании SSR в среде Laravel, и поэтому у меня было время только продемонстрировать простое приложение «Hello World» без значительных особенностей.
Теперь я хочу построить этот предыдущий учебник и продемонстрировать, как сервер сделать приложение Vuue, которое включает в себя несколько страниц с Vue Mar Router, поскольку большинство ваших проектов Laravel будут иметь более одной страницы.
Вы можете получить заполненный код для этого руководства здесь на Github Отказ
Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js на 2017/11/27.
Монтаж
Этот учебник расширит приложение, которое я построен в предыдущей статье Серверный рендеринг с Laravel & Vue.js 2.5 Отказ Убедитесь, что вы знакомы с тем, как он работает и имеет подходящую среду разработки, установленную I.E. с установленным расширением PHP-V8JS.
Если у вас нет этого кода, клонируйте его и настройте:
$ git clone https://github.com/anthonygore/vue-js-laravel-ssr $ cd vue-js-laravel-ssr $ cp .env.example .env $ composer install $ npm i
Затем установите Vue Router:
$ npm i --save-dev vue-router
Модуль маршрутизатора
Мы начнем с создания файла для нашей конфигурации маршрутизатора, которая экспортирует экземпляр маршрутизатора для использования в приложении.
Я составлял некоторые образцы маршрутов с каждым отображением компонента, создаваемого из способа PageComponent Отказ Этот фабричный метод возвращает простой компонент, который не делает ничего более, чем отображать имя страницы. Это все, что нам нужно, чтобы доказать работы SSR маршрутизацию.
Ресурсы/активы/JS/Router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
function PageComponent(name) {
return {
render: h => h('h3', `Hello from the ${name} page`)
};
}
export default new Router({
mode: 'history',
routes: [
{ path: '/', component: PageComponent('Home'), name: 'home' },
{ path: '/about', component: PageComponent('About'), name: 'about' },
{ path: '/contact', component: PageComponent('Contact'), name: 'contact' }
]
});
В главном файле приложения мы теперь импортируем модуль маршрутизатора и добавьте его в приложение, так же, как и в любом проекте Vue. Затем экземпляр приложения экземпляра экспортируется для использования в файлах ввода клиента и сервера.
Ресурсы/Активы/js/app.js
import App from './components/App.vue';
import Vue from 'vue';
import router from './router'
export default new Vue({
router,
render: h => h(App)
});
Маршруты Laravel
Обратите внимание, что наш экземпляр Vue Router находится в режиме истории, поэтому маршруты будут возвращены к серверу, когда подстройка обновляется или загружается из панели навигации.
Это означает, что любой маршрут, который мы создали в интерфейсном приложении, также необходимо создать на стороне сервера. Все они могут указывать на тот же метод контроллера получить :
маршруты/web.php.
Контроллер
Теперь нам нужно настроить многостраничный SSR в контроллере. Это модификация логики в базовом приложении, поэтому убедитесь, что вы знакомы с тем, как это работает.
Чтобы SSR многостраничное приложение нам нужно сообщить о приложении Vue Server (как определено в intry-server.js ), то, что требуется текущий URL. Это гарантирует, что при приложении загружается в песочницу, он отображает правильную страницу компонента.
Чтобы сделать это, мы передаем URL-адрес I.e. $ Запрос-> Путь () до оказывать Метод от получить метод. Затем мы храним URL в глобальной переменной JavaScript URL Это будет доступно в приложении Vue Server, когда он работает в песочнице.
Приложение/HTTP/Controllers/appcontroller.php
executeString($js);
$v8->executeString($renderer_source);
$v8->executeString($app_source);
return ob_get_clean();
}
public function get(Request $request) {
$ssr = $this->render($request->path());
return view('app', ['ssr' => $ssr]);
}
}
Приложение Vue Server
Последний шаг Cars – изменить приложение Vue Server, чтобы мы могли программно установить URL, а не ждать этого пользователя.
Логика для этого находится внутри функции обратного вызова. Вот что это делает:
- Маршрутизатор установлен на правильный URL, нажав глобальную переменную
урл - Когда маршрутизатор готов, мы видим, отображается ли какие-либо компоненты страницы в результате этого нажатия, сообщая нам, что маршрут действителен. Если нет, мы бросаем 404. Если это так, мы возвращаем экземпляр приложения.
Обещание используется, потому что роутер загружает асинхронно. Как только это обещание решит, мы можем использовать метод рендерера сервера RendervueComponenttoString для SSR экземпляр и, наконец, использовать Печать вернуть вывод обратно в нашу среду Laravel.
Ресурсы/активы/JS/intry-server.js
import app from './app'
import router from './router';
new Promise((resolve, reject) => {
router.push(url);
router.onReady(() => {
const matchedComponents = router.getMatchedComponents();
if (!matchedComponents.length) {
return reject({ code: 404 });
}
resolve(app);
}, reject);
})
.then(app => {
renderVueComponentToString(app, (err, res) => {
print(res);
});
})
.catch((err) => {
print(err);
});
Файл приложения
Логика SSR для многостраничного приложения теперь завершена. Давайте создадим несколько ссылок маршрутизатора на странице, чтобы мы могли проверить приложение в браузере:
Ресурсы/Актив/js/Компоненты/app.vue
{{ title }}
About Contact
Загрузка домашней страницы выглядит так:
Настоящий тест посещает маршрут в панели навигации, поэтому маршруты серверов обрабатывают запрос и, надеюсь, SSR приложение. Для этого посетите http://localhost: 9000/О и проверьте исходную разметку. Как видите, он включает в себя представленное приложение в правильном URL-адресе:
Возьмите бесплатный курс Vue.js! Начните с Vue, изучая основные функции и построение реального веб-приложения в нашем бесплатном 2-часовом видео курсе Создайте свое первое приложение Vue.js Отказ Записаться бесплатно !