vue怎么支持seo？

前言：首先明确一个知识点，为什么vue对seo支持不友好？其次仅仅vue对seo 的支持不好吗？react呢？angular呢？答：凡是spa项目对seo都非常不友好，为什么？这个跟网络爬虫有关跟spa的特性有关。第一，网络爬虫喜欢收录原创内容，于是乎我们很常用的手段就是发文章，原创或者伪原创去勾搭爬虫引起爬虫的重视，以此增长网站的权重对吧？但是spa呢偏偏收录不了，为什么？因为spa是单文件内容，意思是项目打包后，只有一个index.html对吧，此时你写一个文章页面如：article/1.html 这个页面有文章，你希望爬虫收录，但是你的服务器有这个实际文件吗？并没有？那爬虫收录个锤子？指望爬虫给你解析前端路由？？？？？？不存在的…它就去服务器上看一眼，哎？没有文件？好吧下一家~

到此能看懂吗？如果看懂不…就好好学学基本功！

那么怎么解决这个问题？简单啊，既然爬虫根据你的路由找不到对应文件，你让它找到不就可以嘛…对吧？
so…

插件

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

**这里以vue-cli为例 **

vue.config.js

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
new PrerenderSPAPlugin({
      // Required -导出到哪里，哪个目录，注意看下相对的位置，这里是根目录
      staticDir: path.join(__dirname, 'dist'),
      // Required - Routes to render.
      routes: [ '/', '/cart', '/list'],
      renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        headless: false
      })
}),

给每个页面添加meta头部信息

main.js

//引入
import MetaInfo from "vue-meta-info";
// meta信息
Vue.use(MetaInfo);
// 注意事件名称
new Vue({
  mounted() {
    document.dispatchEvent(new Event("getSeo"));
  }
});

接下来，在每个你需要独立打包的页面添加meta信息

export default {
  metaInfo: {
    title: '这是价格页面',
    meta: [
      {
        // set meta
        name: 'keyWords',
        content: '这是价格页面关键字'
      },
      {
        name: 'description',
        content: '你好这是价格'
      }
    ]
  }
}

然后，打包吧~然后把你页面扔到服务器，路由能找到实际文件啦
哈哈,就这么简单，完啦~

最后？只有这个方法吗？no!!!
ssr~是另一种很棒的方案，但是呢…平地而起要部署的东西挺多，成本相对也高！
最后！！！！！！
你以为真解决问题了？才不是，你看看你生成的html，检查元素，看看整体的dom结构？爬虫不喜欢滴~怎么还原成格式严禁的html结构呢？？我也在想，有时间研究研究