关于vue.js:vue的SEO优化方法一prerenderspaplugin预渲染

vue 我的项目的 SEO 很差，传统混编网站，页面是在服务器中生成再发回给客户端的，爬虫爬取页面的时候，从服务器中曾经拿到的时残缺内容的页面，而 vue 单页面利用中，页面的内容都是通过 javascript 动静生成的，传统爬虫爬取页面时，获取到的 html 文件只有一个 div 标签，没有任何有价值的货色。

解决 SEO 的办法有好多，它们各自也有着本人的优缺点，而预渲染就是其中的一种。

预渲染的原理是：在打包的时候，用本人的爬虫先爬取一遍指定的页面（vue 渲染完后的页面），生成对应的 html 文件，把打包后的文件夹部署到服务器上，当浏览器拜访这些门路的时候，因为服务器上有对应的 html 文件，所以拜访的是匹配 html 文件，你能够了解为网页的快照。

第一次拜访或者刷新的时候，查看以后页面的源代码，是蕴含了渲染后的很多内容的。html 文件的 js 中蕴含 new Vue() 构建 vue 单页面利用的代码，通过 $router.push 等跳转时，走的依然是 vue 的逻辑，vue 的性能并不会受到影响。

两幅图能够清晰感触到预渲染的成果：

实用场景 ：
适宜内容不常常变动的页面，比方官网的大部分页面、宣传页等；
因为生成的 html 页面曾经是渲染过的了，又不会影响 vue 的能力，所以也能够用作首屏优化，缩小单页面白屏工夫。

然而预渲染不适宜动静网站内容，比方文章详情页，因为预渲染要明确 url，并且一个 url 对应生成一个 html 文件，文章什么的太多，不可能公布一条新的文章，就重新部署一次代码。

这里应用的 vue2 和 vue-cli 构建的我的项目，预渲染插件为:prerender-spa-plugin

装置依赖
```
npm install prerender-spa-plugin -D
```
配置 vue.config.js

// 导入 prerender-spa-plugin 插件，并创立一个 PuppeteerRenderer
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const path = require('path')

module.exports = {configureWebpack: () => {if (process.env.NODE_ENV !== 'production') return
    return {
      plugins: [
        new PrerenderSPAPlugin({staticDir: path.join(__dirname, 'dist'), // 必备，与渲染生成文件的目录，应该和我的项目打包的生产门路统一
          routes: ['/', '/about', '/some/deep/nested/route'], // 必备 须要预渲染的门路
          // 自定义渲染器，非必须，然而在 vue 我的项目中须要用到它
          renderer: new Renderer({
            // 期待页面上调用了指定的事件后再渲染页面，这个和其余爬虫重要的区别
            // 在 main.js 中 document.dispatchEvent(new Event('my-app-element'))，两者的事件名称要对应上。renderAfterDocumentEvent: 'my-app-element'
          })
        })
      ]
    }
  }
}

批改 main.js

/...
new Vue({
  router,
  store,
  mounted () { // 等 vue 执行 mounted 生命周期后，示意页面曾经挂载实现了，这是再触发自定义事件，通知插件能够渲染了
 document.dispatchEvent(new Event('my-app-element'))
  },
  render: h => h(App)
}).$mount('#app')

查看路由模式
预渲染肯定须要应用 history 的路由模式

const router = new VueRouter({
  routes,
  mode: 'history'
})

打包查看成果
```
npm run build
```

执行打包指令后，先会执行失常的打包，再执行预渲染。
你能够关上 dist 文件夹查看打包的变动。

预渲染后 vue 相干的操作不失效，比方点击事件、路由跳转等。

查看 App.vue 文件，看看最外层 div 是否有id="app"，加上即可。

打包过程中，提醒 Unable to prerender all routes（无奈预渲染所有路由）

我打包的过程中常常遇到，失败了就从新再来一次，多弄几次就能够了，猜想是和渲染性能有关系，电脑太差、路由太多或者页面体积太多等

关于vue.js:vue的SEO优化方法一prerenderspaplugin预渲染

前言

代码实现

填坑