seo优化问题 prerender-spa-plugin

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框架

原理：

 

__EOF__

本文作者：小兔
本文链接：https://www.cnblogs.com/g-14/p/17276789.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！