Prerender Prerender-spa-плагин для SEO-оптимизации проекта Vue SPA

внешний интерфейс Vue.js Webpack SEO

Цель

Поскольку обычные сканеры для проектов SPA на основе Vue не могут сканировать статическое текстовое содержимое проекта, подключаемый модуль предварительного рендерингаprerender-spa-pluginРешите проблему SEO в проекте SPA vue.

Вы можете увидеть скомпилированный проектindex.htmlЕсть только ссылки на какие-то файлы HTML и js, css, но нет статического текста о содержимом. Конечно, вы также можете добавить мета-ключевые слова и описание, чтобы описать некоторый контент о веб-сайте в кратком ответе.

curl xxxx.com 
// 返回的结果发现只有简单的HTML和js引用，无相关的静态文本

Использовать процесс

Плагин предварительной визуализации VuePrerender-spa-plugin Адрес GitHub

проблемы, которые можно решить

  • SEO
  • Slow Client
  • OpenGraph/Social Metadata

не могу решить

  • Пользовательский контент,
    • Разные пользователи будут видеть разные страницы, этот тип страницы не подходит для предварительного рендеринга.
  • Frequently changing Content
    • Для некоторых страниц, которые часто меняются, например спортивных игр, скомпилированные данные не будут обновляться в режиме реального времени.
  • Thousands of routers
    • Неприменимо к страницам со слишком большим количеством маршрутов, что приведет к длительному ожиданию процесса сборки.

выполнить

главным образом черезWebpackПуть плагина определяет способ компилирования статических файлов.

npm install prerender-spa-plugin@2.1.0 --save

Простая конфигурация Webpack

// webpack.conf.js
var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')
 
module.exports = {
  // ...
  plugins: [
    new PrerenderSpaPlugin(
      // Absolute path to compiled SPA
      path.join(__dirname, '../dist'),
      // List of routes to prerender
      [ '/', '/about', '/contact' ]
    )
  ]
}
  • После упаковки вы найдете оригиналdistкаталог, подробнееabout,contactТакой каталог, этот каталог будет иметь соответствующийindex.htmlфайл; этот файл представляет собой статическую страницу, соответствующую маршруту производства, что удобно для SEO
curl xxxx.com
// 会发现会讲渲染后的页面返回，而不是刚开始的之后简单的js引用的初始页面
  • Если вам нужно настроить доступ к маршрутизации, вам также необходимо настроитьApacheилиNginxДождитесь доступа, сопоставьте соответствующий маршрут для доступа к файлу index.html в указанном каталоге, вы можете.
// 配置完成后，可以查看效果,每个页面返回的都是编译后的静态文件
curl xxxx.com/about
curl xxx.com/contact

Возникли несколько проблем:

  • В проекте используется версия 2.1.0. Если версия @3.0.0 не будет успешно установлена, она зависнет в процессе установки, в результате чего загрузка будет невозможна. Если она будет прервана напрямую, она приведет к сообщению об ошибке в последующем процессе сборки.
  • Если нет соответствующего маршрута или опечатки, сборка также сообщит об ошибке
  • Маршрут, настроенный в веб-пакете, должен совпадать с маршрутом маршрутизатора, обратите внимание/символ
  • Вам нужно обратить внимание на Apache и другие конфигурации.Если вы обращаетесь к статическим статическим файлам, все они доступны единообразно.dist/static/каталог вместоdist/about/staticэто
Категории