vue-cli3配置预渲染插件prerender-spa-plugin
原创文章,转载请注明出处,谢谢!
什么情况下用预渲染
如果你调研服务器端渲染(SSR)只是用来改善少数营销页面(例如/
, /about
, /contact
等)的SEO,那么你可能需要预渲染。无需使用web服务器实时动态编译HTML,而是使用预渲染方式,在构建时(build time)简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单,并可以将你的前端作为一个完全静态的站点。
prerender-spa-plugin
插件的使用
安装
npm i prerender-spa-plugin -D
vue-cli3的webpack配置
在vue.config.js
中:
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new PrerenderSPAPlugin({
// 生成文件的路径,也可以与webpakc打包的一致。
// 下面这句话非常重要!!!
// 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, './dist'),
// 需要进行预渲染的路由路径
// 对应自己的路由文件,比如index有参数,就需要写成 /index/param1。
routes: ['/', '/step1', '/step2'],
// 这个很重要,如果没有配置这段,也不会进行预编译
renderer: new Renderer({
//等待5秒后渲染页面
renderAfterTime: 5000
})
})
]
}
}
}
}
其中renderAfterTime:5000
表示加载页面5秒后渲染HTML,也有其他的选项,比如renderAfterDocumentEvent
表示使用事件触发渲染,renderAfterElementExists
表示使用页面元素触发渲染。
以上是最基础的配置项,如果有更多的需求配置项,可以去github上查看文档,文档中也有很详细的介绍。