美文网首页
prerender-spa-plugin 预渲染插件的使用说明

prerender-spa-plugin 预渲染插件的使用说明

作者: codeSirCao | 来源:发表于2018-06-20 17:07 被阅读36次

    1:单页面应用不利于SEO

    SSH服务器端渲染

    预渲染**

    由于页面较少,且预渲染相对于SSH比较简单,于是选择预渲染页面,预渲染可以极大的提高网页访问速度。而且配合一些meat插件,基本可以 
    满足SEO需求
    
    
    webpack 配置  
     // https://github.com/chrisvfritz/prerender-spa-plugin
    new PrerenderSPAPlugin({
      staticDir: config.build.assetsRoot,
      // Routes to render
      routes: [ '/', '/login' ,  ],
      //压缩html
      minify: {
        collapseBooleanAttributes: true,
        collapseWhitespace: true,
        decodeEntities: true,
        keepClosingSlash: true,
        sortAttributes: true
      },
      //这个没有配置成功过  可能是
      // renderer: new Renderer({
      //   inject: {
      //     foo: 'bar'
      //   },
      //   headless: false,
      //   renderAfterDocumentEvent: 'render-event'
      // })
    })
    

    我用的脚手架 vue-cli webpack
    打包目录是public 里面其他文件是我们自己的一些东西不用管
    之前打包后 是下面这样的

    image.png

    配置后 注意 routes: [ '/', '/login' , ],


    image.png

    就是把你当前的路由换成静态文件而已

    相关文章

      网友评论

          本文标题:prerender-spa-plugin 预渲染插件的使用说明

          本文链接:https://www.haomeiwen.com/subject/xkjxyftx.html