Renderer is not working when using nested output directory

caiobozato commented 4 years ago

Hello guys,

I'm currently using Vue CLI 3 in my project, but due to internal server policies I need to use nested folders to the dist SPA path:

dist/it-infrastructure/resources/tools/storage-tco-calculator

Here my vue.config.js:

const path = require('path');
const PrerenderSpaPlugin = require('prerender-spa-plugin');

module.exports = {
    outputDir: 'dist/it-infrastructure/resources/tools/storage-tco-calculator',
    publicPath: '/it-infrastructure/resources/tools/storage-tco-calculator/',
    pluginOptions: {
        i18n: {
            locale: 'en',
            fallbackLocale: 'en',
            localeDir: 'locales',
            enableInSFC: false
        }
    },
    configureWebpack: {
        plugins: [
            new PrerenderSpaPlugin({
                // Absolute path to compiled SPA
                staticDir: path.join(__dirname, 'dist'),
                // List of routes to prerender
                routes: ['/', '/faq']
            }
            ),
        ]
    }
}

If I change these options to dist and /, it works well:

...
module.exports = {
    outputDir: 'dist',
    publicPath: '/',
}
...

But I really need to have the dist/it-infrastructure/resources/tools/storage-tco-calculator folder structure.

Could you please help me?

Seokky commented 4 years ago

Hi. Try to remove "outputDir" from webpack config and left "publicPath" as is now.

P.S.: i have a similar problem. Renderer generate structure i need, but templates is not prerendered actually. But in case when "publicPath" equal "/" everything is fine, cause in this case i have correct structure and correct prerendered templates. It's not critical issue for me, because i need nested output directory only for development, but anyway i would like to see production-like app version on dev domen.

P.S.: sorry for my english.

That is my webpack config:

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const prerenderRoutes = require('./src/constants/prerenderRoutes');
const publicPath = process.env.VUE_APP_BASE_URL;

module.exports = {
  publicPath,

  productionSourceMap: false,

  devServer: {
    disableHostCheck: true,
    overlay: false,
  },

  configureWebpack: (config) => {
    const appLocales = process.env.VUE_APP_LOCALES.split(',');
    const routesWithLocale = [];

    prerenderRoutes.forEach((route) => {
      appLocales.forEach((locale) => {
        routesWithLocale.push(`${locale}${route}`);
      });
    });

    const routesWithBase = routesWithLocale.map((route) => {
      return `${publicPath}${route}`;
    });

    console.log();
    console.log();
    console.log('Prerendered routes:');
    console.log(routesWithBase);
    console.log();

    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'),
          routes: routesWithBase,
          renderer: new PrerenderSPAPlugin.PuppeteerRenderer(),
        })
      );
    }
  },

  pluginOptions: {
    i18n: {
      localeDir: 'locales',
      enableInSFC: true
    },
  },
};

Seokky commented 4 years ago

Check it out:

DanFaudemer commented 4 years ago

Have a look to, solved my issue: https://github.com/chrisvfritz/prerender-spa-plugin/issues/215#issuecomment-415942268

chrisvfritz / prerender-spa-plugin

Renderer is not working when using nested output directory #363