vue-prerender-plugin v1.0.5

Goal of vue-prerender-plugin

This plugin provide a way to prerender vue SPAs when webpack build, and save the prerender result to target dir

vue-prerender-plugin-demo

This demo would prerender a vue SPA which is generated by vue-cli(webpack template)

Usage (webpack.config.js)

const VuePrerenderPlugin = require('vue-prerender-plugin')

module.exports = {
  plugins: [
    ...
    // this is equal to new VuePrerenderPlugin(), because all of the options are default ,
    new VuePrerenderPlugin({
      baseUrl: 'http://127.0.0.1/',
      commonQuery: {},
      outputDir: path.resolve(process.cwd(), 'dist'),
      outputFileName: 'index.html',
      needPrerender: true,
      router: [],
      routeParams: {},
      extraRoutes: [],
      excludeRoutes: [],
      puppeteerLaunchOption: {},
      waitFor: '#app div',
      minify: {
        collapseBooleanAttributes: true,
        collapseWhitespace: true,
        decodeEntities: true,
        keepClosingSlash: true
      }
    })
  ]
}

Documentation

Plugin Options

:point_right: Final prerender routes would be router routes + extraRoutes - excludeRoutes.

Option.router

route example

// Array
[
  {
    path: '/parent',
    children: [
      {
        path: 'detail'
      },
      {
        path: 'child'
      }
    ]
  },
  {
    path: '/user/:id'
  },
  {
    path: '/article/:id'
  },
  {
    path: '/user/:id/view/:otherId'
  }
]

// Vue Router Instance
new Router({
  mode: 'history',
  routes: [
    {
      path: '/parent',
      name: 'Parent',
      component: () => import('@/pages/Parent'),
      children: [
        {
          path: 'detail',
          name: 'Detail',
          component: () => import('@/pages/Detail')
        },
        {
          path: 'child',
          name: 'Child',
          component: () => import('@/pages/Child')
        }
      ]
    },
    {
      path: '/user/:id',
      name: 'User',
      component: () => import('@/pages/User'),
      props: true
    },
    {
      path: '/article/:id',
      name: 'Article',
      component: () => import('@/pages/Article'),
      props: true
    },
    {
      path: '/user/:id/view/:otherId',
      name: 'User-View',
      component: () => import('@/pages/UserView'),
      props: true
    }
  ]

Option.routeParams

routeParams example

{
  "/user/:id": {
    ":id": [1, 2, 3, 4]
  },
  "/article/:id": {
    ":id": [1, 2, 3, 4]
  },
  "/user/:id/view/:otherId": {
    ":id": [1, 2, 3, 4],
    ":otherId": [1, 2, 3, 4]
  }
}