Vue 预渲染之 prerender-spa-plugin 的配置使用

我们在使用 vue-cli 脚手架开发 vue 项目时，打包后的文件是一个单页面应用，只能使用浏览器渲染，由于这种方式无法解决seo优化问题，下面我们可以借助 prerender-spa-plugin 和 vue-meta-info 来满足我们的 SEO 的需求。

# 安装 prerender-spa-plugin 及配置

npm install prerender-spa-plugin --save

然后在 webpack.prod.conf.js 里面添加：

// 头部引入
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

1
2
3

在 webpack.prod.conf.js 中的 plugins 里面添加：

new PrerenderSPAPlugin({
  // 生成文件的路径，也可以与webpakc打包的一致。
  // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
  staticDir: path.join(__dirname, '../dist'),

  // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
  routes: ['/', '/a', '/b', '/c'],

  // 预渲染代理接口
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:9018',
        secure: false
      }
    }
  },

  // 这个很重要，如果没有配置这段，也不会进行预编译
  renderer: new Renderer({
    inject: {
      foo: 'bar'
    },
    headless: false,
    // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
    renderAfterDocumentEvent: 'render-event'
  })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

最后在 main.js 里面修改：

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  // 添加mounted，不然不会执行预编译
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})

1
2
3
4
5
6
7
8
9
10

到这里预编译的配置修改就完成了，下面配置 title 和 meta。

npm install vue-meta-info --save # 安装 vue-meta-info

在 main.js 引入：

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

1
2

在 vue 组件页面中这样配置：

<script>
export default {
  // 配置title和meta数据
  metaInfo: {
    title: '我是一个title',
    meta: [
      {
        name: 'keywords',
        content: '关键字1,关键字2,关键字3'
      },
      {
        name: 'description',
        content: '这是一段网页的描述'
      }
    ]
  },
  data () {
    return {}
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

到这里 prerender-spa-plugin 与 vue-meta-info 就全部完成了。

注意

使用预渲染 vue-router 必须使用 history 模式。

# 参考文档

1、prerender-spa-plugin的github地址: https://github.com/chrisvfritz/prerender-spa-plugin (opens new window)
2、vue-meta-info参考文档：https://www.npmjs.com/package/vue-meta-info (opens new window)

#Vue

上次更新: 2024/01/30, 00:35:17

← Vue 项目打包去除 .map 文件方法 vue-cli 2.x和3.x配置移动端适配px自动转为rem→