Vue项目SEO优化[预渲染方案]

Vue预渲染

获得服务端渲染的优点
对特定路由生成静态HTML文件，前端作为一个完全静态的站点
无需使用web服务器实时动态编译HTML
改善少数页面的SEO,可采用预渲染
若网站有成百上千条路线，预编译会非常缓慢（此情况慎用）

vue-meta-info插件，网页meta标签

安装：yarn add vue-meta-info

main.js中进行配置

import MetaInfo from 'vue-meta-info' 
Vue.use(MetaInfo)

在xxx.vue文件里配置

export default {
    // 这些代码会转成网页的meta标签里的内容
    metaInfo: {
        title: '标题',
        meta: [
            {
                name: 'keywords',
                content: '关键字'
            },
            {
                name: 'description',
                content: '网页描述'
            }
        ]
    }

预渲染核心：prerender-spa-plugin

安装：yarn add prerender-spa-plugin

build/webpack.prod.conf.js中进行配置

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

// plugins插件里书写
plugins: [
   new PrerenderSPAPlugin({
      // 生成文件的路径，这个目录只能有一级。若目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动
      staticDir: path.join(__dirname, '../dist'),
      // 对应自己的路由文件
      routes: [ '/', '/home'],
      // html文件压缩
      minify: {
        minifyCSS: true, // css压缩
        removeComments: true // 移除注释
      },
      // 若没有这段则不会进行预编译
      renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        headless: false,
        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
        renderAfterDocumentEvent: 'render-event'
      })
    }),
]

main.js中进行配置

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

注意：官方文档上 路由模式必须为 history 。如果不设置history模式，也能运行和生成文件，每个index.html文件的内容都会是一样的。所以必须使用 history模式