Vue Prerender Plugin
a webpack plugin about prerendering vue websites base on vue-router
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 = moduleexports = plugins: ... // this is equal to new VuePrerenderPlugin(), because all of the options are default , baseUrl: 'http://127.0.0.1/' commonQuery: {} outputDir: path 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
| Option | Type | Default | Description |
|---|---|---|---|
| baseUrl | String | http://127.0.0.1/ |
The base prerender url. |
| commonQuery | Object | {} |
The Common Query which would be add to all prerender url. |
| ouputDir | String | path.resolve(process.cwd(), 'dist') |
Where the prerendered pages would be output. |
| outputFileName | String | index.html |
Which filename the prerendered pages would be saved as. |
| needPrerender | Boolean | true |
Whether to prerender. Recommend value is process.env.npm_config_prerender |
| router | Array|Vue Router Instance | [] |
Router to generate prerender routes. See the Option.router |
| routeParams | Object | {} |
RouterParams to generate prerender routes. See the Option.routeParams |
| extraRoutes | Array | [] |
Extra routes to render |
| excludeRoutes | Array | [] |
Routes not to render |
| puppeteerLaunchOption | Object | {} |
How Puppeteer launch. See the puppeteer launch options |
| waitFor | String|Number|Function | #app div |
Wait for prerender. See the puppeteer wait for |
| minify | Object | { collapseBooleanAttributes: true, collapseWhitespace: true, decodeEntities: true, keepClosingSlash: true } |
Minify the result HTML. See the minify options. |
👉 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 mode: 'history' routes: path: '/parent' name: 'Parent' import'@/pages/Parent' children: path: 'detail' name: 'Detail' import'@/pages/Detail' path: 'child' name: 'Child' import'@/pages/Child' path: '/user/:id' name: 'User' import'@/pages/User' props: true path: '/article/:id' name: 'Article' import'@/pages/Article' props: true path: '/user/:id/view/:otherId' name: 'User-View' 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