记录vue预渲染prerender-spa-plugin踏坑

1.安装

命令：cnpm install prerender-spa-plugin -D //避免报错，会自动下载文件等待

2.找到build下的webpack.prod.conf.js

头部添加

const PrerenderSPAPlugin = require('prerender-spa-plugin') //引用插件

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

plugins: [

// 配置PrerenderSPAPlugin预渲染

new PrerenderSPAPlugin({

// 生成文件的路径，也可以与webpakc打包的一致。

staticDir: path.join(__dirname, '../dist'),

// 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。

routes: ['/','/about'],

// 这个很重要，如果没有配置这段，也不会进行预编译

renderer: new Renderer({

// inject:{

// foo:'bar'

// },

// 触发渲染的时间，用于获取数据后再保存渲染结果

renderAfterTime: 5000,

headless: false,

// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。

renderAfterDocumentEvent: 'render-event'

})

}),

]

在main.js中

new Vue({

el: '#app',

render: h => h(App),

mounted () {

document.dispatchEvent(new Event('render-event'))

}

})

//在HtmlWebpackPlugin中添加chunks: ['manifest', 'vendor', 'app'], //防止报错webpackJsonp is not defined

new HtmlWebpackPlugin({

filename: config.build.index,

template: 'index.html',

inject: true,

minify: {

removeComments: true,

collapseWhitespace: true,

removeAttributeQuotes: true

// more options:

// https://github.com/kangax/html-minifier#options-quick-reference

},

// necessary to consistently work with multiple chunks via CommonsChunkPlugin

chunks: ['manifest', 'vendor', 'app'],

chunksSortMode: 'dependency'

}),

//路由中mode:'history',

//刷新首屏闪现问题

百度方案（测试暂无效果）

根目录的index.html中添加display：none；

app.vue中中修改为block

//百度商桥重复加载出现两次的问题

在打包后生产的html中删除生成的那一份商桥代码，放到服务器会自动生成新一份

参考各大博主，

记录问题

记录vue预渲染prerender-spa-plugin踏坑相关推荐

vue预渲染之prerender-spa-plugin解析(二)
前面我们有介绍了什么是预渲染.使用场景.然后简单的介绍了预渲染的集成过程,感兴趣的童鞋可以去看一下vue预渲染之prerender-spa-plugin解析(一),这一节我们重点来研究一下preren ...
Vue预渲染prerender-spa-plugin+vue-meta-info
前言 vue属于单页面应用,对于SEO不太友好,当然vue也给出了相应的解决办法,可以通过vue ssr服务端渲染进行解决,但对于页面较少的企业站来说可以直接使用 prerender-spa-plgi ...
vue 预渲染（进行SEO优化）
优点: 获取服务端渲染的优点对特定的路由生成HTML文件,作为一个完全静态的站点无需使用服务器进行配置,方便网络爬虫进行推广网站官网:vue-cli-plugin-prerender-spa - ...
Vue SPA项目SEO优化之预渲染Prerender-spa-plugin
目的由于基于Vue的SPA项目普通的爬虫无法爬取项目的静态文本的内容,通过预渲染插件prerender-spa-plugin解决vue的SPA项目的SEO问题. 可以看到项目编译后的index.ht ...
ajax div 赋值重新渲染_优化向：单页应用多路由预渲染指南
前言 Ajax 技术的出现,让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容,这就是单页应用.在一个单页应用中,往往只有一个 html 文件,然后根据访问的 url 来匹配对应的路由脚本, ...
构建时预渲染：网页首帧优化实践
前言自JavaScript诞生以来,前端技术发展非常迅速.移动端白屏优化是前端界面体验的一个重要优化方向,Web 前端诞生了 SSR .CSR.预渲染等技术.在美团支付的前端技术体系里,通过预渲染提 ...
预渲染 prerender-spa-plugin 尝试
背景:想给项目做一些优化,想尝试预渲染和SSR 这里说一下SSR 使用的技术栈是VUE 预渲染使用的是 prerender-spa-plugin 这个包先说一下效果吧这个感觉就是类似高级的骨架屏, ...
vue使用prerender预渲染配合vue-meta实现单页面实现SEO优化
公司项目在已在开发完成的情况下通知需要做SEO优化.因为项目使用的是vue做的单页面应用,顿时人都不好了,只好网上搜罗出来一些配置(其实是另一个带我的老大哥他做的,但是他要走了,工作交接给我, 我需要 ...
prerender ajax,Vue Prerender.io 预渲染seo优化
前言目前 Vue单页面应用在前端界混的风生水起,它的开发思想使得我们能真正做到前后端分离.解耦.单页面应用使用浏览器动态解析JS,呈现出最终的页面,用户体验比较好,网站性能也提高不少.但网络爬虫并不 ...

记录vue预渲染prerender-spa-plugin踏坑

记录vue预渲染prerender-spa-plugin踏坑相关推荐

最新文章

热门文章