Configuring for Vue when publicPath is anything but /

I’ve installed this plugin to pre-render my Vue project, which uses vue-router (in history mode) and Webpack.

The Vue app is not in the root directory of the server serving it. It is in a subdirectory of that server (specifically, /vue, meaning it is served from /vue/dist).

When publicPath: '/vue/dist', in vue.config.js, the plugin only pre-renders around the parent <router-view /> component. If I change publicPath: '/',, the markup for each route is pre-rendered as expected.

This is what my vue.config.js file looks like:

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
module.exports = {
    publicPath: '/vue/dist',
    configureWebpack: {
        plugins: [
            new PrerenderSPAPlugin({
                staticDir: path.join(__dirname, '/dist'),
                routes: [
                    '/',
                    '/vps',
                    '/contact',
                    '/web-hosting',
                    '/status',
                    '/domain-names',
                    '/agreements',
                    '/reseller-hosting',
                    '/about',
                    '/managed-wordpress'
                ],
            })
        ],
    },
};

It looks as if the pre-renderer is not passed the publicPath, but I am not confident in saying that. I would like to know whether there is a way to pass the publicPath parameter to the pre-renderer, and if so, what it is. I’ve looked through the open and closed issues on this project, but the suggestions I found assume that the server root is one within the app’s base directory. In my case, it is outside this directory.

[takatama]

If you would like to serve the Vue app for subdirectory /vue (https://example.com/vue), you should specify not only publicPath, but also outputDir, staticDir, and indexPath as follows:

• outputDir is dist/vue
• routes includes the subdirectory like [‘/vue’, ‘/vue/vps’, ‘/vue/contact’, …]
• staticDir is dist
• indexPath is dist/vue/index.html

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  publicPath: '/vue/',
  outputDir: 'dist/vue/',
  configureWebpack: () => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new PrerenderSPAPlugin({
            staticDir: path.join(__dirname, 'dist'),
            indexPath: path.join(__dirname, 'dist/vue/index.html'),
            ['/vue', '/vue/vps', '/vue/contact']
        ]
      }
    }
  }
}

[cnvoa]

If you would like to serve the Vue app for subdirectory /vue (https://example.com/vue), you should specify not only publicPath, but also outputDir, staticDir, and indexPath as follows:

• outputDir is dist/vue
• routes includes the subdirectory like [‘/vue’, ‘/vue/vps’, ‘/vue/contact’, …]
• staticDir is dist
• indexPath is dist/vue/index.html

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  publicPath: '/vue/',
  outputDir: 'dist/vue/',
  configureWebpack: () => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new PrerenderSPAPlugin({
            staticDir: path.join(__dirname, 'dist'),
            indexPath: path.join(__dirname, 'dist/vue/index.html'),
            ['/vue', '/vue/vps', '/vue/contact']
        ]
      }
    }
  }
}

You can add another line Make it work better

new PrerenderSPAPlugin({
    staticDir: path.join(__dirname, 'dist'),
    outputDir: path.join(__dirname, '/dist/vue/'),
    indexPath: path.join(__dirname, 'dist/vue/index.html'),
    ['/vue', '/vue/vps', '/vue/contact']
})