Vue.js 如何使用预渲染提高 SEO

预渲染是一种将 SPA 在构建时预先渲染成静态 HTML 页面的技术。这样做的好处是,当用户访问页面时,搜索引擎爬虫可以直接抓取到预渲染好的 HTML 内容,而不需要等待 JavaScript 加载完成才能看到页面的内容。这大大提高 SEO 的效果。

在 Vue.js 中,可以使用 prerender-spa-plugin 这个插件来实现预渲染功能。该插件会在构建时自动生成静态 HTML 文件,并将其放在 dist 目录下。

安装 prerender-spa-plugin

需要安装 prerender-spa-plugin 插件:

npm install prerender-spa-plugin --save-dev

配置 prerender-spa-plugin

接下来,在 vue.config.js 文件中配置该插件:

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

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        // 要预渲染的路由列表
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/', '/about', '/contact'],
        renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
          // 使用 Puppeteer 渲染页面
          renderAfterDocumentEvent: 'render-event',
          // 渲染完成后触发的事件
          inject: {
            // 注入一个变量,告诉 Vue 应用进行预渲染
            foo: 'bar'
          }
        })
      })
    ]
  }
}

在上面的配置中,我们指定要预渲染的页面路由,并使用 Puppeteer 作为渲染器。Puppeteer 是一个 Node.js 库,可以控制无头浏览器并进行网页截图、PDF 导出等操作。

在 Vue 组件中添加预渲染标识

为让 Vue 应用知道当前是在预渲染环境中运行,需要在组件中添加一个标识:

export default {
  name: 'MyComponent',
  mounted() {
    if (this.$isPrerender) {
      // 在预渲染环境中执行的逻辑
    } else {
      // 在正常环境中执行的逻辑
    }
  }
}

这里我们使用 this.$isPrerender 来判断当前环境是否为预渲染环境,从而执行不同的逻辑。

通过使用预渲染技术,我们可以显著提高 Vue.js 应用的 SEO 效果。预渲染可以让搜索引擎爬虫直接抓取到静态的 HTML 内容,避免 JavaScript 加载完成之前页面内容为空的问题。预渲染的页面也能更快地响应用户请求,提高用户体验。虽然实现预渲染需要一些额外的配置,但这对于提高网站的 SEO 和性能是非常值得的。