vue-meta-info 处理VUE单页面项目的SEO问题

安装

$cnpm i vue-meta-info --S

 

全局引入

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

 

使用

（一）组件内静态使用 metaInfo

<template>
  ...
</template>

<script>
  export default {
    metaInfo: {
      title: 'My Example App', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: 'My Example App'
      }]
      link: [{                 // set link
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script>

（二）组件内异步加载title 或者 meta

 

<template>
  ...
</template>

<script>
  export default {
    name: 'async',
    metaInfo () {
      return {
        title: this.pageName
      }
    },
    data () {
      return {
        pageName: 'loading'
      }
    },
    mounted () {
      setTimeout(() => {
        this.pageName = 'async'
      }, 2000)
    }
  }
</script>

　

 

　如果使用 webpack，可以使用 prerender-spa-plugin 轻松地添加预渲染。

安装 $cnpm i prerender-spa-plugin --S

　　

// webpack.prod.conf.js
var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')

module.exports = {
  // ...
  plugins: [
    new PrerenderSpaPlugin(
      // 编译后的html需要存放的路径
      path.join(__dirname, '../dist'),
      // 列出哪些路由需要预渲染
      [ '/', '/home', '/about' ]
    )
  ]
}