- Если вы предпочитаете смотреть видео ..
- Начинаем новый проект Vue
- Установка плагина Vue Prerender
- Создание маршрутов
- Добавление заголовка к маршрутам
- Строительство проекта Vue
Vue, наряду с другими интерфейсами JavaScript, такими как Angular и React, предоставляют нам прекрасный набор инструментов для улучшения приложений и веб-сайтов. Есть проблема, с которой они все сталкиваются, когда SEO становится требованием; Сканеры поисковой системы не могут сканировать контент.
Предлагаемое решение - рендеринг на стороне сервера, когда сервер генерирует контент и передает его браузеру. Проблема с этим подходом состоит в том, что он обычно довольно сложен и вводит соображения развития.
Однако этого можно избежать, если требования вашего проекта просты. Вы можете использовать плагин предварительной визуализации для генерации статических HTML-файлов вашего приложения, при условии, что ваше приложение соответствует следующим критериям:
- У него нет тонны маршрутов (страниц), иначе сборка может занять много времени.
- Содержание не часто меняется.
- У него нет пользовательского контента.
Все эти вопросы рассматриваются в PreRender-спа-плагин что мы собираемся использовать для этого урока.
Давайте начнем!
Если вы предпочитаете смотреть видео ..
Обязательно Подпишитесь на официальный канал Coursetro Youtube для большего количества видео.
Начинаем новый проект Vue
Мы собираемся использовать CLI Vue для запуска нового проекта с помощью команды init, основанной на простом шаблоне webpack :
> vue init webpack-simple vue-static-preПросто нажмите Enter во всех запросах (и y или n в зависимости от того, хотите ли вы поддерживать Sass).
Затем перейдите в новую папку проекта и установите зависимости:
> cd vue-static-pre> npm installУстановка плагина Vue Prerender
Находясь в консоли, выполните следующую команду, чтобы установить плагин prerenderer, плагин веб-пакета HTML и маршрутизатор Vue:
> npm install prerender-spa-plugin html-webpack-plugin --save-dev> npm установить vue-router --saveЗатем откройте /webpack.config.js и добавьте следующие 2 строки вверху:
var path = require ('path') var webpack = require ('webpack') var PrerenderSpaPlugin = require ('prerender-spa-plugin') // Здесь var HtmlWebpackPlugin = require ('html-webpack-plugin') // И ВотДалее, примерно в строке 10 нам нужно изменить свойство publicPath на:
output: {... publicPath: '/', // Прямо здесь ...},Вокруг строки 59 в том же файле добавьте следующее:
// Найти эту строку вокруг строки 59: if (process.env.NODE_ENV === 'production') {// Вставить следующее как другой плагин. Другой код удален для краткости new HtmlWebpackPlugin ({template: 'index.html', filename: path.resolve (__dirname, 'dist / index.html')}), новый PrerenderSpaPlugin (// Абсолютный путь к скомпилированному SPA path.resolve ( __dirname, './dist'), // Список маршрутов для предварительной отрисовки ['/', '/ about'], {// Опции}),Во-первых, HtmlWebpackPlugin перезаписывает наш index.html, так как простой шаблон webpack, который мы использовали для создания этого проекта, не включает его в вывод webpack.
Далее, PrerenderSpaPlugin - это место, где происходит волшебство. Мы просто сообщаем ей местоположение папки ./dist , а затем предоставляем ей список наших маршрутов в массиве.
Далее в {} мы можем добавить опции. Мы добавим варианты к этому чуть позже ..
Создание маршрутов
Создайте папку / src / router / и файл внутри нее index.js со следующим содержимым:
import Vue из 'vue' import Router из 'vue-router' import About из '../About' import Home из '../Home' Vue.use (Router) экспортировать по умолчанию новый маршрутизатор ({маршруты: [{путь: '/', имя: 'Home', компонент: Home}, {путь: '/ about', имя: 'About', компонент: About}], режим: 'history'})Это типичный файл роутера, поэтому здесь не так много объяснений.
Создайте файлы About.vue и Home.vue в папке / src / .
Для Home.vue вставьте следующее содержимое:
<template> <div class = "home"> <h1> HOME </ h1> <p> Это моя любимая домашняя страница, как здорово! </ p> </ div> </ template>Для пасты About.vue :
<template> <div class = "about"> <h1> ОБ </ h1> <ul> <li> О себе, точка 1 </ li> <li> О себе, точка 2 </ li> <li> О себе, точка 3 </ li> </ ul> </ div> </ template>Затем откройте /src/main.js и внесите следующие изменения:
импортировать Vue из 'vue' импортировать приложение из './App.vue' импортировать VueRouter из 'vue-router' // Добавить этот импортный маршрутизатор из './router' // добавить это Vue.use (VueRouter) // добавить это new Vue ({el: '#app', router, // Добавить этот рендер: h => h (App)})Большой! Нам также нужно изменить наш раздел шаблона корневого компонента /src/App.vue на:
<template> <div id = "app"> <img src = "./ assets / logo.png"> <h1> {{msg}} </ h1> <p> <router-link to = "/"> Главная страница </ router-link> <router-link to = "/ about"> О программе </ router-link> </ p> <router-view> </ router-view> </ div> </ template>Последнее, что нам нужно сделать, это удалить строку # 9 из index.html, так как наша новая сборка внедряет свой собственный скрипт для build.js самостоятельно:
<! - Удалить эту строку: -> <script src = "/ dist / build.js"> </ script>Добавление заголовка к маршрутам
PreRender-спа-плагин предоставляет вам все возможные варианты, которые вы можете указать. Скорее всего, вы захотите указать хотя бы уникальный заголовок для каждого маршрута.
Посетите файл /webpack.config.js и в строке параметров // вставьте следующее:
{postProcessHtml: function (context) {var title = {'/': «Моя домашняя страница», «/ about»: «Моя потрясающая страница»} return context.html.replace (/ <title> [^ <] * <\ / title> / i, '<title>' + title [context.route] + '</ title>')}}Внутри объекта титров вы просто сопоставляете маршрут со значением тега заголовка. Просто!
Строительство проекта Vue
В консоли или командной строке выполните следующую команду:
> npm run buildДайте ему немного времени, и он должен создать папку / dist со статическими файлами.
Для быстрой проверки перейдите в папку / dist и запустите простой http-сервер:
> cd dist> http-серверПримечание. Если у вас не установлен http-сервер , просто введите команду: npm install -g http-server
Затем вы можете открыть браузер, перейти на http: // localhost: 8080 и увидеть приложение в действии.
Если вы откроете инспектор разработчика CTRL-SHIFT-i в Chrome и просмотрите исходный код HTML, вы обнаружите, что весь HTML-код присутствует. Это означает, что поисковые роботы смогут видеть ваш контент!
На этом этапе вы просто загрузите содержимое вашей папки / dist на веб-сервер, и оно должно работать.
