seo优化问题 prerender-spa-plugin

发布时间 2023-04-07 12:27:59作者: IT小兔
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框架
原理: