prerender-spa-plugin 预渲染页面显示问题, 使用vue
因为要优化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的方式可以解这个问题
有人用过预渲染插件遇过这个问题吗?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
这个问题跟路由是hash模式还是history模式关系不大。
解决方法是:renderer对象里,加入inject对象,里面设置一个只有在预渲染时才能拿到的属性,然后在页面上,比如App.vue中,做一个判断
注意:visually-hidden的样式不能是 display: none,SEO爬虫会忽略,从而失去了预渲染的意义
如果帮到了你,回复一下让我知道。。。
不能用ssr也不能用history模式的时候 真不知道要怎么解决,楼主有什么想法吗
楼主问题解决了吗?我也遇见了
楼主问题解决了吗?
里面加上你要预渲染的路由
在路由里面加上你要渲染的页面路由就行了