Введен в практику механизм пререндеринга проекта Vue

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

На выходных хочу заняться SEO-оптимизацией для проекта webApp, который уже сделал статические страницы, потому что не хочу писать хромаетSSRкод, поэтому я собираюсь использовать предварительный рендеринг Я думал, что в Интернете так много.предварительный рендерингСтатья, просто найди за кем последовать и сделай, и все.В итоге я провела все выходные в молодости... В этой статье будет записано как это было настроено в итоге.Т.Т.

утверждение:

  1. Следующая конфигурация сохраняет только необходимые
  2. Здесь используется каталог сборкиbaseВместо этого измените его самостоятельно.
  3. использование шаблона vue-cliwebpack, другие шаблоны и так далее
  4. веб-приложение — онлайн-предварительный просмотр
  5. Github — предварительно обработанная демонстрация настроена

Заинтересованные студенты могут добавить группу WeChat в конце статьи для совместного обсуждения~

1. Введение и сценарии использования

Мы знаем, что у SPA есть много преимуществ, но один недостаток заключается в том, что он не оптимизирован для поисковых систем для глупых поисковых систем (не Google), чтобы позаботиться об этих системах, в настоящее время есть два основных решения:рендеринг на стороне сервера(Визуализация на стороне сервера),предварительный рендеринг(Предварительно).

Если вам нужно улучшить только несколько страниц (например,/, /about, /contactи т.д.)SEO, то вам может потребоваться предварительная визуализация. Вместо использования веб-сервера для динамической компиляции HTML «на лету» (рендеринг на стороне сервера, SSR) используйте предварительный рендеринг, чтобы просто создавать статические файлы HTML для определенных маршрутов во время сборки. он в основном используетprerender-spa-pluginПлагины, такие как SSR, могут ускорить загрузку страниц и менее навязчивы Механизм предварительного рендеринга можно легко внедрить с небольшими изменениями в онлайн-проект, в то время как решение SSR должно перевернуть всю структуру проекта;

При доступе к предварительно обработанной страницеSSRЭто так же быстро и ускоряет компиляцию HTML на стороне сервера для времени сборки, тем самым снижая нагрузку на сторону сервера, если ваш сервер куплен так же, как мой.Ядро 1М1Г1small pipe server (плохой), то предварительный рендеринг может быть для вас более подходящим. Однако между сценариями использования SSR и предварительного рендеринга все же есть очевидные различия. Сценарии использования пререндеринга — это более простые статические страницы. Рендеринг на стороне сервера подходит для сложных, крупномасштабных, функциональных веб-сайтов, которые часто взаимодействуют с сервером, например веб-сайтов электронной коммерции.

2. Конфигурация установки

Во-первых, давайте взглянем на стек связанных технологий: vue^2.5.2, vue-router^3.0.1, vue-cli^2.9.6, webpack^3.6.0, prerender-spa-plugin^3.3.0.

2.1 Установка

Установка такая же, как и у других библиотек

# Yarn
$ yarn add prerender-spa-plugin -D
# or NPM
$ npm install prerender-spa-plugin --save-dev

2.2 Конфигурация внешнего интерфейса

Сначала посмотрите на файловую структуру, используя файловую структуру, сгенерированную шаблоном веб-пакета vue-cli2.

│  .babelrc
│  index.html
│  package.json
│  README.md
├─build
│      build.js
│      check-versions.js
│      utils.js
│      vue-loader.conf.js
│      webpack.base.conf.js
│      webpack.dev.conf.js
│      webpack.prod.conf.js
├─config
│      dev.env.js
│      index.js
│      prod.env.js
├─src
│  │  App.vue
│  │  main.js
│  │ 
│  ├─assets
│  ├─components
│  ├─router
│  │      index.js
│  ├─styles
│  ├─utils
│  └─views
│          BigData.vue
│          CompanyHonor.vue

Затем идет настройка router/index.js.Требованием для предварительного рендеринга является режим истории.В некоторых статьях говорится, что режим истории не нужен.Это неправильно,иначе сгенерированные страницы будут одинаковыми html. Также обратите внимание, чтоbaseВ противном случае, если вы хотите перейти на вторичную страницуlocalhost/base/homeкогда вы нажимаете на страницу<router-link to="/home">home</router-link>прыгает, когдаlocalhost/home

// src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
 
 
Vue.use(Router)
 
 
export default new Router({
  mode: 'history',
  base: '/base/',
  routes: [...]
})

Затем конфиг, обратите внимание здесьassetsPublicPathнет./,

// config/index.js

const path = require("path")
 
module.exports = {
  build: {
    index: path.resolve(__dirname, "../base/index.html"),
    assetsRoot: path.resolve(__dirname, ".."),
    assetsSubDirectory: "base/static",
    assetsPublicPath: "/",
  }
}

Затем идет конфигурация плагина, который помещается вprodв, потому что он используется только при построении

// build/webpack.prod.conf.js

const path = require('path')
const config = require('../config')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
 
const webpackConfig = merge(baseWebpackConfig, {
  new PrerenderSPAPlugin({
   staticDir: config.build.assetsRoot,
   outputDir: path.join(config.build.assetsRoot, 'base'),
   indexPath: config.build.index,
 
   // 对应路由文件的path
   routes: [
     '/',
     '/BigData',
     '/CompanyHonor'
   ],
 
   renderer: new Renderer({
     headless: false,            // 无桌面系统去掉
     renderAfterDocumentEvent: 'render-event'
   })
  })
})

Обратите внимание, что если ваш проект развернут в системе без рабочего стола, такой как linux/centOS, вам необходимо поместитьheadless: falseУдалите его.Если CentOS сообщает, что библиотека не найдена, см.issue-200решение.

Также обратите внимание на вышеrenderAfterDocumentEvent: 'render-event'Так что это значитrender-eventПосле срабатывания события выполняется пререндер, который запускается смонтированным хуком в main.js.

// src/main.js

import Vue from 'vue'
import App from './App'
 
new Vue({
  el: '#app',
  render: h => h(App),
  mounted() {
    document.dispatchEvent(new Event('render-event'))
  }
})

Есть еще одна конфигурация, на которую стоит обратить внимание в build/utils.js.ExtractTextPlugin.extractизpublicPath, иначе некоторые ресурсы, на которые ссылается vue, не будут найдены

// build/utils.js

ExtractTextPlugin.extract({
  use: loaders,
  fallback: 'vue-style-loader',
  // publicPath: '../../'
})

Выполнить в это времяnpm run buildВы можете сгенерировать только что настроенный вPrerenderSPAPluginHTML-страница в роутах в плагине находится в html.Во время этого процесса браузер хрома будет открываться ненадолго во вспышке, так что не беспокойтесь об этом.

Результирующее дерево каталогов:

│  index.html
├─BigData
│      index.html
├─CompanyHonor
│      index.html
└─static
    ├─css
    ├─fonts
    ├─img
    └─js

Наконец, если вы хотите дополнительно оптимизировать SEO сгенерированной страницы, вы можете сотрудничать сvue-meta-infoВ интернете много статей, поэтому не буду вдаваться в подробности.

2.3 Конфигурация nginx

Кстати, вставьте конфигурацию nginx

server {
        listen 80;
        server_name localhost;
        root /nginx-1.14.0/html;

        error_page 500 502 503 504 /50x.html;
        
        location ~ ^/base/ {
          try_files $uri $uri/ /base/index.html;
        }
        location = /50x.html {
            root html;
        }
}

Большинство сообщений в Интернете имеют разную глубину и даже некоторые несоответствия. Следующие статьи являются кратким изложением процесса обучения. Если вы найдете какие-либо ошибки, пожалуйста, оставьте сообщение, чтобы указать ~

Ссылаться на:

  1. Руководство по рендерингу Vue.js на стороне сервера
  2. Рендеринг и предварительный рендеринг Vue на стороне сервера
  3. vue-cli v3, can't get it to work.. issue #215
  4. unable to start Puppeteer. Failed to launch ... issue #200
  5. When assetsPublicPath is set, the... issue #176
  6. vue.js vue-router режим истории маршрутизация, доменное имя вторичный каталог подкаталог конфигурация nginx
  7. Еще один способ справиться с одностраничным мета SEO Vue

PS: Всех приглашаю обратить внимание на мой публичный аккаунт [Front End Afternoon Tea], давайте работать вместе~

Кроме того, вы можете присоединиться к группе WeChat «Front-end Afternoon Tea Exchange Group», нажмите и удерживайте, чтобы определить QR-код ниже, чтобы добавить меня в друзья, обратите вниманиеДобавить группу, я заберу тебя в группу~

Категории