контент router-view дублируется с помощью vue + vue -router + prerender-spa-plugin - PullRequest
Новая
       20

контент router-view дублируется с помощью vue + vue -router + prerender-spa-plugin

0 голосов
/ 17 июня 2020

Я создал проект vue с vuetify, typescript и vue -router здесь:

https://github.com/RudolfVonKrugstein/vue-prerender-test

Я добавил prerender-spa -плагин. Для этого я добавил data-view ко всем своим маршрутам и поместил это в свой vue .config. js: 

// vue.config.js
const path = require('path');
const PrerenderSpaPlugin = require('prerender-spa-plugin');

const productionPlugins = [
  new PrerenderSpaPlugin({
    staticDir: path.join(__dirname, 'dist'),
    routes: ['/', '/about'],
    postProcess(renderedRoute) {
      renderedRoute.html = renderedRoute.html
          .replace(/<script (.*?)>/g, `<script $1 defer>`)
          .replace(`id="app"`, `id="app" data-server-rendered="true"`)

      return renderedRoute
    },
    renderer: new PrerenderSpaPlugin.PuppeteerRenderer({
      // We need to inject a value so we're able to
      // detect if the page is currently pre-rendered.
      inject: {},
      // Our view component is rendered after the API
      // request has fetched all the necessary data,
      // so we create a snapshot of the page after the
      // `data-view` attribute exists in the DOM.
      renderAfterElementExists: `[data-view]`,
    }),
  }),
];

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(...productionPlugins);
    }
  },
}

Теперь, когда я создаю это, используя и запускаю тестовый веб-сервер: 

> yarn build
> cd dist
> python3 -m http.server

И сразу открыть страницу about http://localhost:8000/about Я вижу, что контент дублируется:

enter image description here

Немного поэкспериментируем Более того, я могу сделать вывод, что дублируется только содержимое <router-view/>. Также, внимательно наблюдая за тем, как отображается веб-страница, я замечаю, что с самого начала есть одна «О странице» (я предполагаю, что она предварительно отрисована), а через несколько мгновений вторая создается под ней.

Итак, мой Предполагаю, что vue -router не заменяет текущие элементы <router-view/>, а создает второй экземпляр под ним.

Почему это могло быть? И что я мог сделать?

...