vue 如何支持seo

必要的插件

"vue-meta-info": "^0.1.7",
"prerender-spa-plugin": "^3.4.0",

安装方法

npm install vue-meta-info --save
npm install prerender-spa-plugin --save-dev

使用方法

vue-meta-info

1、 main.js文件中

// ...
import MetaInfo from 'vue-meta-info'

// ...
Vue.use(MetaInfo)

2、有路由的组件中

export default {
  name: 'Index',
  metaInfo: {
    title: '家盟家政管理系统', // set a title
    meta: [{ // set meta
      name: 'keyWords',
      content: '家盟，家政管理，家政助手，月嫂管理，保姆管理，育儿嫂管理，阿姨管理，三个阿姨'
    }, {
      name: 'Description',
      content: '家盟是为家政公司提供的一款SaaS平台，提供针对阿姨和客户的管理工具，通过阿姨简历快捷分享、自由添加客户跟进记录等更好的实现阿姨与客户的匹配与协调，从而降低客户流失率；自定义商家小程序中的显示内容和服务产品，提升门店形象，拓展获取客户渠道。'
    }]
  }
}

prerender-spa-plugin

2.1 、main.js文件中

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

2.2、webpack.prod.conf.js文件中

const webpackConfig = merge(baseWebpackConfig, {
  plugins: [
    // new ...
    // 不要讲这个new放在plugins的开头，否则导致编译报错
    new PrerenderSPAPlugin({
      // 生成文件的路径，也可以与webpakc打包的一致。
      // 下面这句话非常重要！！！
      // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
      staticDir: path.join(__dirname, '../dist'),
      
      // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
      routes: ['/', '/download'],
      
      // 这个很重要，如果没有配置这段，也不会进行预编译
      renderer: new Renderer({
          inject: {
            foo: 'bar'
          },
          headless: false,
          // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
          renderAfterDocumentEvent: 'render-event'
      })
    })
  ]
}

npm run build打包上线后可以在seo查询中查看自己网站的KeyWords,Description等信息

不用太多咬文嚼字，如果觉得这篇文章对你的工作有帮助，请留下你的足迹，附上线上案例，点击家盟家政查看

猜你喜欢