vue单页面seo(prerender-spa-plugin,vue-meta-info)

首先来说下prerender-spa-plugin这个插件，是不能处理动态路由的，如果想要是优化一下首页的加载速度，可以使用这个。

推荐使用nuxt,这个可以处理动态路由，官网的文档也很好看懂。

1. 先安装prerender-spa-plugin插件：cnpm i prerender-spa-plugin --save

2. 修改webpack配置项,，在build目录下的webpack.prod.conf.js中做两步操作

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

 

 new PrerenderSpaPlugin({
      // 编译后的html需要存放的路径
      staticDir: path.join(__dirname, '../dist'),
      // 列出哪些路由需要预渲染
      routes: ['/', '/detail', '/about'],
      renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        renderAfterTime: 5000,
        headless: false
      })
    })

3.在main.js中修改成如图样子

好了prerender-spa-plugin插件就配置好了，接下来是vue-meta-info

1.安装 cnpm i vue-meta-info --save

2.在main.js中引入，如图

接下来就是使用了

然后执行命令 npm run build

看dist目录下是否有

然后把dist目录下的文件扔到服务器上运行，

异步数据成功渲染

下面是源码：https://download.youkuaiyun.com/download/qq_33040483/10914534