vue spn如何做seo优化

Posted sinosaurus

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue spn如何做seo优化相关的知识,希望对你有一定的参考价值。

vue spn如何做seo优化

突然来了一个需求,对已有的项目做SEO优化,WHAT? 总所周知,spn对seo不够优化,因而官方考虑到直接使用ssr

一个不算解决办法的办法prerender-spa-plugin

// build/webpack.prod.conf.js
const PrerenderSPAPlugin = require(‘prerender-spa-plugin‘)
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
new PrerenderSPAPlugin({
  // 生成文件的路径,也可以与webpakc打包的一致。
  // 下面这句话非常重要!!!
  // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
  staticDir: path.join(__dirname, ‘../dist‘),

  // 对应自己的路由文件,比如index有参数,就需要写成 /index/param1。
  routes: [‘/opty‘, ‘/customer‘, ‘/channelVendor‘, ‘/contract_type‘, ‘/contract‘, ‘/bill‘],

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

// main.js
new Vue({
  router,
  store,
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event(‘render-event‘))
  }
}).$mount(‘#app‘)

// router 需要使用history
new Router({
  mode: ‘history‘,
  routes
})

参考资料12

总结

  • 打包时间真心长,很不适合做seo
  • 只适合简单处理,若是项目复杂,路由较多,便不是很适合了

以上是关于vue spn如何做seo优化的主要内容,如果未能解决你的问题,请参考以下文章

百度谷歌搜索引擎研究,如何做SEO优化?网站优化实操(程序员必看)

百度谷歌搜索引擎研究,如何做SEO优化?网站优化实操(程序员必看)

如何做seo优化排名?

新手如何做好网站优化

SEO页面优化以及如何对单页面应用进行SEO优化

新手做网站SEO优化,该如何进行优化操作?