prerender-spa-plugin 预渲染页面显示问题, 使用vue

Question

因为要优化seo, 选择了省力方便好配置的预渲染插件 prerender-spa-plugin,

配置是这样的

    new PrerenderSpaPlugin({
      staticDir: path.resolve(__dirname, '../dist'),
      routes: [ '/'],
      server: {
        port: 8080
      },
      renderer: new Renderer({
        // Optional - Wait to render until the specified element is detected using `document.querySelector`
        renderAfterElementExists: '#games-area',
        headless: true // Display the browser window when rendering. Useful for debugging.
      })
    })

但build 出来的静态html div#app 包含了所有我要得到的静态资源, 虽然达到欲渲染的目的，
但, 当我从其他页面进入(例如：网址列直接输入 host/about), 却也会先闪一下首页的布局及样式

router mode是冒险用了hash(避麻烦QQ), 想说有没有不改router mode的方式可以解这个问题

有人用过预渲染插件遇过这个问题吗？

Answer 1

routes: [ '/']

里面加上你要预渲染的路由

Answer 2

在路由里面加上你要渲染的页面路由就行了

Answer 3

楼主问题解决了吗？我也遇见了

Answer 4

楼主问题解决了吗？

Answer 5

不能用ssr也不能用history模式的时候 真不知道要怎么解决，楼主有什么想法吗

Answer 6

这个问题跟路由是hash模式还是history模式关系不大。

解决方法是：renderer对象里，加入inject对象，里面设置一个只有在预渲染时才能拿到的属性，然后在页面上，比如App.vue中，做一个判断

  renderer: new PuppeteerRenderer({
    renderAfterDocumentEvent: 'render-event',
    // headless: false,
    inject: {
      isPrerender: true,
    },
  }),

<template>
  <div id="app" :class="{ 'visually-hidden': isHidden }">
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHidden: true,
    }
  },
  mounted() {
    if (!window.__PRERENDER_INJECTED || !window.__PRERENDER_INJECTED.isPrerender) {
      this.$nextTick(() => {
        this.isHidden = false
      })
    }
  },
}
</script>

<style lang="less" scoped>
.visually-hidden {
  position: absolute;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
}
</style>

注意：visually-hidden的样式不能是 display: none，SEO爬虫会忽略，从而失去了预渲染的意义

如果帮到了你，回复一下让我知道。。。