SEO优化Vue项目

项目要求项目首页时间峰值不能超过5s，之前的项目一般要求的都是平均值5s，挑战有点大，尝试了各种优化方法后，项目响应时间降到了5.3s，但是革命尚未成功，同志们还得努力呀！

今天尝试使用SEO优化项目，去网上学习了一波，加上实践后，打包成功，分享下具体操作步骤：

本次只介绍vue-cli3的解决方案

使用 webpack + prerender-spa-plugin + vue-meta-info轻松地添加预渲染

1、安装 prerender-spa-plugin --save

npm install prerender-spa-plugin --save

2、在vue.config.js中配置

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

module.exports = {
    configureWebpack: {
   
    name: name,
   
   
    // 代码压缩
    plugins: [
     
      new PrerenderSPAPlugin({
        // 生成文件的路径，也可以与webpakc打包的一致。
        // 下面这句话非常重要！！！
        // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
        staticDir: path.join(__dirname, 'dist'),
        // outputDir: path.join(__dirname, './'),
        // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
        routes: ['/login','/dashboard'],
        // 这个很重要，如果没有配置这段，也不会进行预编译
        renderer: new Renderer({
          inject: {
            foo: 'bar'
          },
          headless: false,
          // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
          renderAfterDocumentEvent: 'render-event'
        })
      })
    ]
  },
}

3、在main.js中配置：

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
//添加到这里,这里的render-event和vue.config.js里面的renderAfterDocumentEvent配置名称一致
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

4、进行打包：

npm run build:prod --report