Vue项目seo优化: vue-meta-info + prerender-spa-plugin

vue单页面的项目，不可避免考虑seo问题，解决单页面的seo问题的方法，使用vue-meta-info 配合 prerender-spa-plugin 预渲染

一，prerender-spa-plugin使用

npm install prerender-spa-plugin --save

在webpack.prod.conf.js中加入

const PrerenderSpaPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSpaPlugin.PuppeteerRenderer;

在plugins中加入

plugins: [
        new PrerenderSpaPlugin({
            // 生成文件的路径，也可以与webpakc打包的一致。
            // 下面这句话非常重要！！！
            // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
            staticDir: path.join(__dirname, '../dist'),
            // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
            routes: ['/'],

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

在main.js中加入

/* eslint-disable no-new */
new Vue({
    el: "#app",
    router,
    store,
    components: { App },
    template: "<App/>",
    mounted() {
        document.dispatchEvent(
            new Event("render-event")
        ); /* //document.dispatchEvent(new Event('custom-render-trigger'))     这句非常重要，否则预渲染将不会启动 */
    }
});

二，vue-meta-info使用

npm install vue-meta-info --save

main.js中全局引入

// 引入 vue-meta-info
import Vue from 'vue'
import MetaInfo from 'vue-meta-info'

// 注册 vue-meta-info 
Vue.use(MetaInfo)

组件内静态使用：

<template>
  <div class="home">
    <home-search></home-search>
    <!-- header -->
    <base-header class="header"></base-header>
    <!-- nav -->
    <!-- <base-nav></base-nav> -->
    <div class="content">
      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
    <base-footer class="base-footer"></base-footer>
  </div>
</template>

<script>
export default {
  name: 'home',
  metaInfo: {
    title: '首页', // 设置title
    meta: [
      {
        // 设置关键字
        name: 'keyWords',
        content:
          '这是关键字'
      },
      {
        // 设置页面描述
        name: 'Description',
        content: '这是页面描！'
      },
      {
        name: 'baidu-site-verification',
        content: 'code-rrmEBp0hbQ！'
      }
    ]
  },
},

在网站页面，点击右键查看网页源代码，

vue-meta-info并不是直接改变页面的meta信息，而是在下面追加一条覆盖上面的，如下图：

 

 转自：vue项目使用prerender-spa-plugin + vue-meta-info seo优化_LambertShe的博客-CSDN博客