How to properly connect prerender plugin in webpack?

Question

webpack

I'm writing a vue.js application using vue-cli and the "webpack" template. I want to connect prerender-spa-plugin to prerender some pages. I connect the plugin according to the instructions, my config:

plugins: [
  ...
  new PrerenderSpaPlugin(
        path.join(__dirname, '../dist'),
        [ '/contacts' ]
   )
]

When trying to build, the following error occurs

building for production...(node:18116) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
building for production...
Starting to optimize CSS...
Processing static/css/app.af50ec1dcfba364825fdde893772d421.css...
Processed static/css/app.af50ec1dcfba364825fdde893772d421.css, before: 175534, after: 174686, ratio: 99.52%
building for production...
path_to_node_modules/prerender-spa-plugin/lib/compile-to-html.js:82
                    if (error) throw stdout
                               ^
WARNING: JavaScript error while prerendering: /contacts
TypeError: undefined is not an object (evaluating 'e[r].call')

  phantomjs://code/phantom-page-render.js:26 in onError

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `node build/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     ~/.npm/_logs/2017-09-01T13_44_34_232Z-debug.log

Who connected prerendering to this template, share your experience.

Answer 1

Here is a normal analysis:
https://youtu.be/pwHdFPEX4NA
There are differences from the new version, but it's not difficult to figure it out. The webpack configs are in build.
Norm bun for a static site with several pages. No need to install node.js on the server and nuxt thus disappears.