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'),
      // 列出哪些路由需要預(yù)渲染
      [ '/' ]
    )
  ]
}

全局引入 vue-meta-info

src/main.js

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

Vue.use(MetaInfo)

組件內(nèi)靜態(tài)使用 metaInfo

<template>
  ...
</template>

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

此方法打包后的文件目錄，依然為單頁面，但頁面中的keywords以及content以修改

本文內(nèi)容參考處理 Vue 單頁面 Meta SEO的另一種思路