prerender-spa-plugin 预渲染
vue-cli是单页项目,只有一个index.html,对seo问题不优化
prerender-spa-plugin 预渲染可以生产多个目录,每个目录下都有一个index.html
适合:一个项目可能某几个页面需要做seo
prerender-spa-plugin运用时存在一些bug建议直接替换成prerender-spa-plugin-next
使用方法:
vue.config.js中:
const PrerenderSPAPlugin = require('prerender-spa-plugin-next')
const path = require('path')
module.exports = defineConfig({
configureWebpack: {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, '/dist'), //打包的路径
routes: [ '/policy'], //需要预渲染的url
rendererOptions: {
inject:{foo: 'bar'},
headless: false,
//这个时需要的,不然打包的html没有预渲染
renderAfterDocumentEvent: 'render-event'
}
})
]
},
})
main.js中:读取配置,获取需要预渲染的页面
mounted(){
setTimeout(()=>{
document.dispatchEvent(new Event('render-event')) //这里的名称和上面的名称保持一直
},5000)
}
注:1. router模式要时history, 2. 有浏览器兼容性配置package.json中的browserslist请去掉,不然会报错,3.打包完成后是静态的,要用js的数据用nuxt.js框架
原理: