Мало знаний, большой вызов! Эта статья участвует в "Необходимые знания для программистов«Творческая деятельность.
Эта статья также участвует "Проект "Звезда раскопок"" , чтобы выиграть творческие подарочные пакеты и бросить вызов творческим поощрениям
Пакетные проекты с использованием vue-cli, как правило, являются спа-проектами. Общеизвестно, что одностраничные приложения не способствуют SEO. Есть два решения: ssr (рендеринг на стороне сервера) и предварительный рендеринг. Здесь мы обсуждаем только предварительный рендеринг.
vue-cli версии 2.0
Установить
npm install prerender-spa-plugin --save
Добавьте немного кода в webpack.prod.conf.js.
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin') // 引入插件
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
plugins:[
// 配置PrerenderSPAPlugin
new PrerenderSPAPlugin({
// 生成文件的路径，也可以与webpakc打包的一致。
staticDir: path.join(__dirname, '../dist'),
// 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
routes: ['/', '/report','/genius','/index/param1'],
// 一定要写，如果没有配置这段，也不会进行预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
})
]
добавить в main.js
new Vue({
el: '#pingce',
router,
store,
components: { App },
template: '<App/>',
// 添加mounted，不然不会执行预编译
mounted () {
document.dispatchEvent(new Event('render-event'))
}
})
Установить режим: «история» в router.js
Запустите npm run build, чтобы увидеть, есть ли папка, соответствующая каждому имени маршрута, в сгенерированном каталоге dist. Затем найдите index.html в каталоге и откройте его с помощью IDE, чтобы увидеть, имеет ли содержимое файла то содержимое, которое должно быть в файле.
Каждый настроенный вами маршрут будет создавать папку, а затем в каждой папке будет создаваться файл index.html.
vue-cli3.0 версия
3.0 cli выглядит намного чище, и удален каталог конфигурации сборки 2.0 и т. Д., Затем мы используем веб-пакет, как изменить конфигурацию?
Создайте vue.config.js в корневом каталоге и настройте свою конфигурацию.
Установить
npm install prerender-spa-plugin --save
Добавлено в vue-config.js
const PrerenderSPAPlugin = require('prerender-spa-plugin'); // 引入插件
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new PrerenderSPAPlugin({
// 生成文件的路径，也可以与webpakc打包的一致。
// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname,'dist'),
// 对应自己的路由文件，比如about有参数，就需要写成 /about/param1。
routes: ['/', '/product','/about'],
// 必须配置不然不会进行预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
}),
],
};
}
}
добавить в main.js
new Vue({
router,
store,
render: h => h(App),
// 与 vue-config.js的renderAfterDocumentEvent: 'render-event'名字一定要对应上
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
Установить режим: «история» в router.js
Запустите npm run build, чтобы увидеть, есть ли папка, соответствующая каждому имени маршрута, в сгенерированном каталоге dist.
Суммировать:
1. Режим маршрутизации лучше всего использоватьhistoryрежиме вы также можете запустить сгенерированный файл, не используя его, но просматривать содержимое каждого файла index.html одинаково.
2. Настройки в 3.0 и 2.0 примерно одинаковые, но надо обращать внимание на очень индивидуальные места
В версии 2.0 установитеstaticDir: path.join(__dirname,'../dist')В 3.0 установитьstaticDir: path.join(__dirname,'dist')Если эти две настройки неверны, запуск сборки npm run сообщит об ошибке.
Рекомендуется, если вы хотите установить заголовок и метаинформацию для каждой страницы.[vue-meta-info]
Нравится и поддержите, оставьте в руке стойкий аромат, и будьте почитаемы, шевелите своими ручонками, чтобы заработать состояние, спасибо, что оставили свои следы.
Прекрасная рекомендация в прошлом
Несколько методов шифрования, обычно используемых во внешнем интерфейсе
Холст Восхождение на Пит-Роуд [Методы]
Не разбираетесь в сео-оптимизации? Статья, которая поможет вам понять, как сделать SEO-оптимизацию
Холщовая дорога для скалолазания [Свойства]
[Практическая глава] Руководство по разработке мини-программы WeChat и практика оптимизации
Поговорим о мобильной адаптации
Практика оптимизации производительности интерфейса
Разговор о раздражающих регулярных выражениях
Получите адрес потока большого двоичного объекта файла для реализации функции загрузки.
Не понимаете виртуальный DOM Vue? Эта статья поможет вам полностью получить виртуальный DOM
Рекомендации, связанные с Git
git реализует автоматическое нажатие
Рекомендации, связанные с интервью
Внешний вид 4D-зоны — расширенный
Для получения дополнительной информации см.:Домашняя страница