Vue项目的SEO预渲染优化方案

有关Vue项目或是单应用的项目优化方案很多，我只简单说两种，举个小栗子：

# 1. vue-meta-info插件

顾名思义，是有关网页meta标签的
安装

npm install vue-meta-info --save

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: '网页描述'
            }
        ]
    }
}

# 2. 预渲染核心（prerender-spa-plugin ）

安装

npm run 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,
  render:h=>h(App),
  mounted(){
      document.dispatchEvent(new Event('render-event'))
  }
})

注意：官方文档上 路由模式必须为 history 。否则虽能运行和生成文件，但每个index.html文件的内容都会是一样的，故此必须使用 history模式。