prerender-spa-plugin使用

要点提示

预渲染优势

 seo优化

如何在vue页面中使用

安装插件

 npm install prerender-spa-plugin

在config/index.js文件中找build标签，修改以下内容

   index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

在main.js中修改以下代码

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

 在webpack.prod.conf.js添加代码

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;


  plugins: [
    new PrerenderSPAPlugin({
      //你存放的静态资源目录
      staticDir: path.join(__dirname, '../dist'),
      //你需要对哪几个路由进行SEO，数组形式，可以多个路由
      routes: ['/','/home', '/case'],
      //预编译的重要配置
      renderer: new Renderer({
        inject: {
          foo: 'far'
        },
    
        //非常重要，文档事件渲染后调用的事件名，在项目的入口中使用
        renderAfterDocumentEvent: 'render-event'

      })

    }),

]