Integration with Vue CLI 3.0+ generated project?

I have the plugin working with a project generated with the vue init command, using one of the simple templates. But the Vue CLI vue create command with vue-cli 3.0 structures things differently.

I looked through the docs and different examples, and I found that I had to create a vue.config.js config file. I used the same config setup from the working version, ran yarn build --production and the standard output is generated in /dist instead of the fully html rendered version and files…

Here’s what my vue.config.js file looks like:

`var PrerenderSpaPlugin = require(‘prerender-spa-pluginx’) var HtmlWebpackPlugin = require(‘html-webpack-plugin’) var path = require(‘path’)

module.exports = {

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
        plugins: [

            new HtmlWebpackPlugin({
                template: 'index.html',
                filename: path.resolve(__dirname, 'dist/index.html')
              }),
          
              new PrerenderSpaPlugin(
                // Absolute path to compiled SPA
                path.resolve(__dirname, '/dist'),
                // List of routes to prerender
                [ '/', '/about', '/portfolio/one', '/portfolio/two', '/portfolio/three', ],
                {
                    // options
                }
              ),
          ]
    }
}

}`

If I’m doing something obviously wrong, let me know… Thanks.

[JoshTheDerf]

@designcourse Took me way too long to figure out what went wrong.

You’re simply forgetting to return an object containing the plugin configuration and have an extra slash in the dist path. You also shouldn’t need HTMLWebpackPlugin with vue-cli 3.0, so I’d go ahead and remove that.

So instead of this:

var PrerenderSpaPlugin = require('prerender-spa-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path')

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      plugins: [
        new HtmlWebpackPlugin({
          template: 'index.html',
          filename: path.resolve(__dirname, 'dist/index.html')
        }),

        new PrerenderSpaPlugin(
          // Absolute path to compiled SPA
          path.resolve(__dirname, '/dist'),
          // List of routes to prerender
          [ '/', '/about', '/portfolio/one', '/portfolio/two', '/portfolio/three', ],
          {
              // options
            }
        ),
      ]
    }
  }
}

You should do this:

var PrerenderSpaPlugin = require('prerender-spa-plugin')
var path = require('path')

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return

    return {
      plugins: [
        new PrerenderSpaPlugin(
          // Absolute path to compiled SPA
          path.resolve(__dirname, 'dist'),
          // List of routes to prerender
          [ '/', '/about', '/portfolio/one', '/portfolio/two', '/portfolio/three', ],
          {
              // options
          }
        ),
      ]
    }
  }
}

By the way, I’d recommend upgrading to prerender-spa-plugin v3 with yarn add prerender-spa-plugin@next -D.

[vesper8]

@designcourse I could really use your vue-cli v3 tutorial on how to use this plugin right about now… because I can’t get it to work!