vue seo优化（预渲染prerender-spa-plugin结合vue-meta-info）

参考文章：

https://www.jianshu.com/p/56949dab75e5
https://www.cnblogs.com/kdcg/p/9606302.html
https://blog.csdn.net/yftk765768540/article/details/81047145

https://blog.csdn.net/yanby921005/article/details/80305971（seo优化-页面内容优化）

 https://github.com/muwoo/vue-meta-info（vue-meta-info官网）

正文：

前提：已完成vue单页面开发，使用的hash模式，但现在需要对网站进行seo优化

选择seo优化的方式：对于项目的现状，选择“预渲染”方式进行seo优化

优化步骤：

一、首先搜索引擎对于#后面的内容（锚）点一般是不收录的，所以需要先把hash模式改成history模式

1.router文件夹中index.js

export default new Router({
    mode: 'history',
    base: '/',//如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base
  routes: []
})

2.改成history模式后，后台的配置上篇文章已经说明，地址https://www.cnblogs.com/duanzhenzhen/p/11585952.html

3.安装prerender-spa-plugin

// 安装
cnpm install prerender-spa-plugin --save

4.在webpack.prod.conf.js头部引入prerender-spa-plugin：

// 头部引入
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

 5.在webpack.prod.conf.js的plugins里面添加：

new PrerenderSPAPlugin({
  // 生成文件的路径，也可以与webpakc打包的一致。
  // 下面这句话非常重要！！！
  // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
  staticDir: path.join(__dirname, '../dist'),

  // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
  routes: ['/', '/a', '/b', '/c', '/d'],

  // 预渲染代理接口
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:9018',
        secure: false
      }
    }
  },

  // 这个很重要，如果没有配置这段，也不会进行预编译
  renderer: new Renderer({
    inject: {
      foo: 'bar'
    },
    headless: false,
    // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
    renderAfterDocumentEvent: 'render-event'
  })
}),

6.在main.js里面修改：

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  // 添加mounted，不然不会执行预编译
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})

7.安装 vue-meta-info 配置title和meta：

cnpm install vue-meta-info --save

8.在main.js引入：

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

9.在vue页面中配置：

<script>
export default {
  // 配置title和meta数据
  metaInfo: {
    title: '我是一个title',
    meta: [
      {
        name: 'keywords',
        content: '关键字1,关键字2,关键字3'
      },
      {
        name: 'description',
        content: '这是一段网页的描述'
      }
    ]
  },
  data () {
    return {}
  }
}
</script>

10.完成

待解决问题：

vue-meta-info设置完keywords，content后，右键查看源代码还是没有内容。暂时在index.html中写成静态title,keywords,content

补充：title格式：xxx_xxx_xxx；或xxx,xxx,xxx（包含网站定位和转化（即用户看到后能主动点进去，如：用户看到“环保地板十大品牌”中的“十大品牌”就会更容易进入网站））