Vue Pre-render SPA - корневой файл перезаписывает файл шаблона - PullRequest
Новая
       52

Vue Pre-render SPA - корневой файл перезаписывает файл шаблона

0 голосов
/ 03 июля 2018

Проблема в том, что если вы добавляете "/" к маршрутам для предварительного рендеринга, а затем обновление страницы, отличной от "/", заставляет браузер использовать содержимое предварительно обработанного индексного файла.

Как настроить Vue и PSPA таким образом, чтобы корневой каталог был предварительно обработан, и, тем не менее, Vue знает, как использовать оригинальный (пустой) файл index.html для визуализации непредставленных маршрутов?

Я попытался добавить файл index.template в / public, а затем добавить его в конфигурацию PSPA: 

indexPath: path.join(__dirname, 'dist', 'index.template.html'),

Но это не удается построить. Это правильный способ сделать это?

Ответы [ 2 ]

0 голосов
/ 10 июня 2019

В соответствии с документацией на https://github.com/SolarLiner/vue-cli-plugin-prerender-spa#backend-routing-configuration-for-deployments, вы должны просто указать предварительно обработанные маршруты на index.html, а не предварительно обработанные маршруты на app.html в конфигурации вашего сервера.

0 голосов
/ 07 июля 2018

Я приведу общее решение. Это решение может также помочь людям, которые испытывают «белые вспышки» при нагрузке с помощью плагина prerender-spa, описанного здесь: https://github.com/chrisvfritz/prerender-spa-plugin/issues/193

Шаги для устранения проблемы:

  1. Скажите плагину Pre-SPA не использовать index.html в качестве файла шаблона. 

     indexPath: path.join(__dirname, 'dist', 'app.html')
  1. Скажите Vue (CLI 3), чтобы предоставить этот файл Pre-SPA: 

chainWebpack: config => {
  if (process.env.NODE_ENV !== 'production') return
    config
      .plugin('html')
      .tap(args => {
        args[0].template =  path.join(__dirname, 'public', 'index.html');
        args[0].filename =  'app.html';
          return args
        })
      }
  1. Сконфигурируйте ваш веб-сервер для использования другой точки входа для root ("/"), чем для всех других путей. Поскольку я использую firebase, я добавил это в firebase.json: 

  "rewrites": [
    {
      "source": "**",
      "destination": "/app.html"
    },
    {
      "source": "/",
      "destination": "/index.html"
    }
  ]

После сборки в папке / dist у вас будет файл app.html и файл index.html.

Файл app.html используется каждый раз, когда кто-то обновляет страницу на вашем сайте, которая НЕ была предварительно обработана. Файл app.html должен быть «чистым» и не содержать предварительно обработанную информацию.

Файл index.html используется только в корневой папке и содержит весь предварительно обработанный контент.

...