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

预渲染模式 预渲染prerender-spa-plugin配置生成多页面，解决首屏白屏问题，提升用户体验。同时配合可以生成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: '
    ',  // 添加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 r526987cnpm install puppeteer复制代码