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 模式运行,但是可以通过修改配置文件运行"有头"模式,具有如下功能:

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

安装

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项目在浏览器中绽放光芒!

相关推荐
别拿曾经看以后~1 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
Devil枫7 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子8 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山9 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享9 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果9 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄10 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰10 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
薛一半12 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js