使用vue-meta-info优化页面SEO

vue-meta-info 官方地址： monkeyWangs/vue-meta-info

添加所需插件

vue-meta-info

npm install vue-meta-info --save-dev

prerender-spa-plugin

npm install prerender-spa-plugin --save-dev

配置文件

build/webpack.base.conf.js

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

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

全局引入 vue-meta-info

src/main.js

import Vue from 'vue'
import MetaInfo from 'vue-meta-info'

Vue.use(MetaInfo)

组件内静态使用 metaInfo

<template>
  ...
</template>

<script>
  export default {
    metaInfo: {
      title: 'page title', // set a title
      meta:{
        keywords: 'keywords'//keywords
      },{
        content: 'content'//content
      }]
    }
  }
</script>

此方法打包后的文件目录，依然为单页面，但页面中的keywords以及content以修改

本文内容参考处理 Vue 单页面 Meta SEO的另一种思路