vue-cli3预渲染处理

发表于 | 更新于 | 分类于

vue模块化开发很方便，但也有问题，那就是seo。解决seo问题有两种方案，一种是ssr(服务端渲染)，还有一种是预渲染，只针对部分需要seo的页面进行渲染即可。

预渲染配置步骤

  1. 安装预渲染插件

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

  2. 配置vue.config.js中的webpack设置，因为预渲染就是基于webpack打包的过程中实现的。

    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
    32
    33
    34
    // 这三项一定要有，因为下面configureWebpack中用到了
    const PrerenderSPAPlugin = require('prerender-spa-plugin');
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
    const path = require('path');

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

  3. 修改mian.js，上面配置中有个renderAfterDocumentEvent设置了一个事件，如果main.js需要在mounted时监听事件，否则不会执行预渲染

    1
    2
    3
    4
    5
    6
    7
    8
    9
    new Vue({
      router,
      store,
      render: (h) => h(App),
      // 添加mounted，不然不会执行预编译
      mounted() {
        document.dispatchEvent(new Event('render-event'));
      }
    }).$mount('#app');

  4. 执行npm run build进行编译。在编译的过程中会弹出一个浏览器窗口对每个预编译的页面进行展示，不要关闭它，等渲染完毕，它会自动关闭的。

项目源码

https://gitee.com/shooke/vue-demo/tree/master/vue-demo-prerender

相关资料

vue-cli2预渲染请看https://juejin.im/post/5b8ba25751882542f25a6cc8

shooke 支付宝

支付宝