vue预渲染prerender-spa-plugin解决首屏白屏问题

预渲染模式 预渲染prerender-spa-plugin配置生成多页面，解决首屏白屏问题，提升用户体验。同时配合 vue-meta-info 可以生成title和meta标签，可解决SPA页面的SEO痛点

一、安装

npm install prerender-spa-plugin --save

二、路由模式

特别注意：使用预渲染vue-router必须使用history模式

// 路由配置如下：
export default new Router({
  mode: 'history',  // 将mode的值修改为history
  routes: [
    // 根路径
    {
      path: '/',
      redirect: '/index',
      component: Index
    },
    // 首页
    {
      path: '/index',
      component: Index
    },
    // 发现
    {
      path: '/find',
      component: Find
    },
    // 订单
    {
      path: '/order',
      component: Order
    }
  ]
})
复制代码

三、webpack配置

注意：如果使用的是vue-cli，则必须是在build中的webpack.prod.conf.js文件中添加配置，这样在执行打包命令npm run build时才会生效

webpack.prod.conf.js添加以下配置：

1、引入prerender-spa-plugin插件

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
复制代码

2、添加插件

// 在webpack的plugin中添加：
// 在vue-cli生成的文件的基础上，下面这个才是我们要配置的
    new PrerenderSPAPlugin({
      // 生成文件的路径，也可以与webpakc打包的一致。
      // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
      staticDir: path.join(__dirname, '../dist'),
      
      // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
      routes: ['/', '/find', '/order', ],
      
      // 这个很重要，如果没有配置这段，也不会进行预编译
      renderer: new Renderer({
          inject: {},
          // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
          renderAfterDocumentEvent: 'render-event',
          args: ['--no-sandbox', '--disable-setuid-sandbox']
      })
  })
复制代码

四、修改main.js入口文件

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

复制代码

按照以上步骤完成配置后，执行 npm run build，可以在dist目录中，看到webpack配置的需要预渲染的几个页面，如下图：

五、遇到的问题：

按照上面的步骤配置了以后，抱着试一试的心态执行了npm run build，结果不出意外的挂了，小样，就猜到不会这么顺利的.....

下面就是报的错误：

bogon:vue-meituan admin$ npm run build

vue-meituan@1.0.0 build /Users/admin/Desktop/vue-meituan node build/build.js

⠧ building for production... Starting to optimize CSS... Processing static/css/app.0363d93c8c31fa94640cb54cec450bb6.css... Processed static/css/app.0363d93c8c31fa94640cb54cec450bb6.css, before: 78372, after: 71744, ratio: 91.54% ⠇ building for production...========== /Users/admin/Desktop/vue-meituan/node_modules/puppeteer/.local-chromium/mac-599821/chrome-mac/Chromium.app/Contents/MacOS/Chromium Error: Chromium revision is not downloaded. Run "npm install" or "yarn install" at Launcher.launch (/Users/admin/Desktop/vue-meituan/node_modules/puppeteer/lib/Launcher.js:115:15) [Prerenderer - PuppeteerRenderer] Unable to start Puppeteer ⠏ building for production...(node:8028) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'close' of null at PuppeteerRenderer.destroy (/Users/admin/Desktop/vue-meituan/node_modules/@prerenderer/renderer-puppeteer/es6/renderer.js:140:21) at Prerenderer.destroy (/Users/admin/Desktop/vue-meituan/node_modules/@prerenderer/prerenderer/es6/index.js:87:20) at PrerendererInstance.initialize.then.then.then.then.then.then.then.then.catch.err (/Users/admin/Desktop/vue-meituan/node_modules/prerender-spa-plugin/es6/index.js:144:29) (node:8028) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:8028) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. ⠇ building for production...^C

从上面报错信息可以看出问题所在：必须指定版本的 chromium 才能使用 puppeteer

解决办法：

经查阅资料，在一篇文章上，找到了一个快捷的办法下载更新合适的Chromium版本。

使用淘宝镜像，下载puppeteer，可以代理下载 Chromium r526987
cnpm install puppeteer
复制代码

参考

www.sunzhongwei.com/use-the-pup… blog.csdn.net/qq_42606051… juejin.im/post/5bee7d…