预渲染模式 预渲染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…

Logo

前往低代码交流专区

更多推荐