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

参考文章：

https://blog.csdn.net/qq_38652744/article/details/84648683?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242

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'),
　

　　//包文件输出目录，必须为根目录，否则加载不了样式
　　outputDir:path.join(config.build.assetsRoot,'/'),

　　// 对应自己的路由文件，比如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>

若设置关键词或描述信息为动态数据，

metaInfo(){
    return {
      meta: [{
        name: 'keyWords',
        content: this.list1  //变量或字符串
      }, {
        name: 'description',
        content: this.list2
      }]
    }
  },

 

10.完成

 

 

效果

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