vue预渲染方案

发表于 更新于 分类于 本文字数： 1.3k 阅读时长 ≈ 1 分钟

@vue/cli基于webpack + prerender-spa-plugin + vue-meta-info的seo优化

1.安装prerender-spa-plugin插件

1
npm i prerender-spa-plugin

2.@vue/cli（vuecli3）配置vue.config.js文件添加插件参数配置：

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
29
30
31
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const path = require('path')

module.exports = {
  publicPath: '/',
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 下面这句话非常重要！！！
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname, 'dist'),
          // outputDir: path.join(__dirname, './'),
          // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
          routes: ['/', '/about', '/contact'],
          renderer: new Renderer({
            inject: {
              foo: 'bar'
            },
            headless: false,
            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
            renderAfterDocumentEvent: 'render-event'
          })
        })
      ]
    }
  },
}

3.在main.js中添加代码：

1
2
3
4
5
6
7
8
new Vue({
  router,
  render: h => h(App),
  mounted () {
    //dispatchEvent() 方法给节点分派一个合成事件
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')