prerender-spa-plugin is a webpack plugin to pre-render pre-defined pages.
NOTE: If you need server-side rendering, refer to Vue.js Server-Side Rendering Guide.
Install plugin
npm install --save-dev prerender-spa-plugin
NOTE: Using prerender-spa-plugin 3.4.0
.
Edit vue.config.js
.
const path = require('path')const PrerenderSPAPlugin = require('prerender-spa-plugin')module.exports = { configureWebpack: { plugins: process.env.NODE_ENV === 'production' ? [ new PrerenderSPAPlugin({ // Required - The path to the webpack-outputted app to prerender. staticDir: path.join(__dirname, 'dist'), // Required - Routes to render. routes: [ '/', '/about', '/day/2019-10-18', '/card/qGNpbK3R7ne0siTNPTya'], }) ] : [] }}
NOTE: If you have many dynamic routes, you would need to write a program to generate all possible routes.
Build
npm run build
Output at /dist
directory.
NOTE: Launch a command line web server for testing.
References: