Implementing prerender SPA plugin to vue2js application

Question

I'm trying to implement very popular prerender SPA plugin.

Documentation say to add module to webpack.config.js but I don't have such file I have webpack.base.conf.js, webpack.dev.conf.js and webpack.prod.conf.js.

In first there is no plugins array but it is in last two. So I injected in them:

new PrerenderSPAPlugin({
    // Required - The path to the webpack-outputted app to prerender.
    staticDir: path.join(__dirname, 'dist'),
    // Required - Routes to render.
    routes: [ '/' ],
})

to plugins array and I required it at the top of file. Then I run in command line

> npm run build
> cd dist
> live-server

npm run build created dist folder in root directory and now after I added plugin it additionaly add dist directory in config directory where the webpack.conf files are located. In this new dist folder inside config directory is index.html file which is basically empty html template:

<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Not Found</pre>


</body></html>

What I'm doing wrong?

BT101 BT101 · Accepted Answer · 2019-02-11T19:59:02

I found my mistake in root component which is App.vue. I didn't have id="app" to my root div.

Implementing prerender SPA plugin to vue2js application

1 Answers