vue 单页面应用SEO

一. 使用prerender-spa-plugin插件预渲染

• vue-cli2.0版本

1. 安装插件

npm install prerender-spa-plugin -S

2. 在webpack.prod.config.js 中添加

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

 //plugins 添加PrerenderSPAPlugin
    new PrerenderSPAPlugin({
      // 生成文件的路径，也可以与webpakc打包的一致。
      staticDir: path.join(__dirname, '../dist'),         
      // 对应自己的路由文件
      routes: ['/','/news','/about','/contact'],
      renderer: new Renderer({
          inject: {
            foo: 'bar'
          },
          headless: false,
      })

3.修改main.js

new Vue({
  el: '#app',
  router,
  data:{
    hasShow:true,
  },
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event('custom-render-trigger'))
  }
})

二. 优化配置meta，使用vue-meta-info

1. 安装

npm install vue-meta-info -S

2.main.js引用

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

3. 相应路由页面配置metaInfo

// about.vue
export default {
  metaInfo: {
    title: '关于我们', 
    meta: [{                 
      name: 'keywords',
      content: '关于我们'
    },
    {                
      name: 'description',
      content: '关于我们的页面'
    }
    ],
  },
  name: "about",
  ....
}

4. 配置 App.vue

  metaInfo(){
    return this.metaInfo
  },
  data(){
    return{
      metaInfo:{
        title:'首页',
        meta: [{                 
                name: 'keywords',
                content: '首页'
              },
              {                
                name: 'description',
                content: '首页'
              }
          ],
        }
    }
  },
  watch:{
      $route(to){
          if(to.name==="about"){//根据不同路由配置不同
              this.metaInfo= {
                  title: '关于我们', 
                  meta: [{                 
                      name: 'keywords',
                      content: '关于我们'
                      },
                      {                
                      name: 'description',
                      content: '关于我们的页面'
                      }
                  ],
              }
          }else{
            this.metaInfo={
                title:'首页',
                meta: [{                 
                      name: 'keywords',
                      content: '首页'
                    },
                    {                
                      name: 'description',
                      content: '首页'
                    }
                ],
              }
          }
      }
  }