Vue开发者必读：深入了解预渲染及插件的妙用！

背景

因为之前的网站是使用Vue开发的，SPA对于搜索引擎来说非常的不友好，没有办法抓取到有效的信息。

有些人可能会选择使用像是SSR服务器渲染、Nuxt 静态化、使用Phantomjs针对爬虫做处理等，这确实是个解决办法，但对于小型项目来说更好的做法是使用 Prerendering 方式，过程也相对简单。此篇将介绍如何使用prerender-spa-plugin 将我们的SPA 添加预渲染。

此文仅记录首次为 Vue 项目增加 SEO 优化过程，使用过程中若存在疑难杂症及解决方案，会及时补充进来，若你们在使用过程中遇到了什么问题,也可以来探讨来解决！

原理

prerender-spa-plugin 是Vue 核心团队成员开发出的预渲染插件，其内部利用了 Puppeteer 的爬取页面的功能。在Webpack 构建的最后阶段爬取指定路由的内容，之后再将这些内容实际渲染成独立的 HTML 文件，并建立路由对应的目录，这边我们不需要下载 puppeteer，因为我们项目采用的是vue cli脚手架，此为相依套件。

一些博客说需要安装 Chrome 浏览器，我一直在用 Chrome,故未验证!

Puppeteer是什么

Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行，但是可以通过修改配置文件运行"有头"模式,具有如下功能:

生成页面 PDF。
抓取 SPA（单页应用）并生成预渲染内容（即"SSR"（服务器端渲染））。
自动提交表单，进行 UI 测试，键盘输入等。
创建一个时时更新的自动化测试环境。使用最新的 JavaScript 和浏览器功能直接在最新版本的Chrome中执行测试。
捕获网站的 timeline trace，用来帮助分析性能问题。
测试浏览器扩展。

安装

js 复制代码

npm i -D prerender-spa-plugin
# yarn add prerender-spa-plugin

配置

在vue.config.js中配置webpack信息

js 复制代码

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');

configureWebpack 为 function

js 复制代码

configureWebpack: config => {
    config.plugins.push(
        new PrerenderSPAPlugin({
        // 必备 预渲染生成文件的目录应该和项目打包的生产路径一致
        staticDir: path.join(__dirname, "dist"),
        // 与当前项目路由保持一致
        routes: ['/', '/home'] 
        renderer: new Renderer({
          inject: {
            foo: "bar",
          },
          // 当设置为false时，可以看到渲染时调用的浏览器，在调试页面时非常有用
          headless: true,
          // 可选 - 当 document 触发以下事件时才开始渲染页面，使用vue组件时建议配置
          renderAfterDocumentEvent: "render-event",
        }),
      }),
  )
}

chainWebpack 链式

js 复制代码

chainWebpack: config => {
    if (process.env.NODE_ENV == "production") {
      config.plugin("PrerenderSPAPlugin").use('prerender-spa-plugin', [
        {
          // 必备 预渲染生成文件的目录应该和项目打包的生产路径一致
          staticDir: path.join(__dirname, "dist"), 
          // 与当前项目路由保持一致
          routes: ['/', '/home']
          renderer: new Renderer({
            // 默认挂在 window.__PRERENDER_INJECTED 对象上，可以通过
            // window.__PRERENDER_INJECTED.foo 在预渲染页面取值
            inject: {
              foo: "bar",
            },
            // 当设置为false时，可以看到渲染时调用的浏览器，在调试页面时非常有用
            headless: true,
            // 可选 - 当 document 触发以下事件时才开始渲染页面，使用vue组件时建议配置
            renderAfterDocumentEvent: "render-event",
          }),
        }])

    }
  },

修改入口文件

配置了 renderAfterDocumentEvent: 'render-event'时，vue组件需要在入口main文件进行相应的修改

javascript 复制代码

new Vue({
    el: '#app',
    mounted() {
        // 通知 prerender-spa-plugin 可以渲染了
        document.dispatchEvent(new Event('render-event'));
    }
});

路由模式

我们需要将路由模式修改为 mode: history 模式。

js 复制代码

new VueRouter({
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: routes
})

构建

js 复制代码

$ npm run build 
# yarn build

执行构建命令后，我们可以看到多出了 home 文件夹。在使用 /home 访问关于页面时，展示的就是 home 文件夹下的 index.html 页面了。

结合使用 vue-meta-info 使用更佳

Vue-Meta-Info 是一个能在vue2中使用的插件，能在vue文件中动态更改当前页面或者组件的meta中的信息（例如title，description，keyworld等）。

安装

js 复制代码

npm i vue-meta-info --save
# yarn add vue-meta-info -D

使用

在 main.js 文件中引入 vue-meta-info

js 复制代码

import MetaInfo from 'vue-meta-info
Vue.use(MetaInfo)

静态使用

在 Vue 组件中使用：

js 复制代码

export default {
  name: "Home",
  metaInfo: {
    title: "this is my web",
    meta: [
        { name: "keyWords", content: "prerendering" },
        { name: "description", content: "good,prerendering" }
    ],
  },
}

动态使用

js 复制代码

export default {
  name: 'Home',
  metaInfo () {
    return {
      title: this.pageName
    }
  },
  data () {
    return {
      pageName: 'store'
    }
  },
  mounted () {
    setTimeout(() => {
      this.pageName = 'index'
    }, 2000)
  }
}

结尾

在Vue的奇妙世界里，SEO不再是一个可望而不可即的目标。通过预渲染插件的巧妙运用，我们成功地将SEO优化融入到了Vue项目中。希望这篇文章为你提供了洞察力，让你的应用在搜索引擎中获得更好的曝光，用户的点击。未来，愿你的Vue项目在浏览器中绽放光芒！