异步加载 vue.config.js 以预渲染元数据

Question

I'm attempting to asynchronously load some data in to my Vue.js application's config, to be consumed by Chris Fritz's PrerenderSPA webpack plugin, however - it doesn't seem to be pre-rendering any of the routes.

When I hard code the values - they're prerendered fine, it just seems to fail when attempting to async load the webpackConfiguration.

This is my watered down attempt:

const configPromise = new Promise(async (resolve, reject) => {

  // API Fetch for Prismic Routes:
  const blogRoutes = await prismicRoutes;

  let renderRoutes = [
    ...generalRoutes,
    ...blogRoutes,
  ];

  // then at some point call `resolve()` with the config object:
  resolve({
    pwa: {
      name: 'App',
      themeColor: '#000000',
      msTileColor: '#000000',
      appleMobileWebAppCapable: 'yes',
      appleMobileWebAppStatusBarStyle: 'black',

      // configure the workbox plugin
      workboxPluginMode: 'InjectManifest',
      workboxOptions: {
        // swSrc is required in InjectManifest mode.
        swSrc: 'src/service-worker.js',
        // ...other Workbox options...
      }
    },
    configureWebpack: {
      plugins: [
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'),
          routes: renderRoutes,
        }),
      ],
    },
  });
});

module.exports = configPromise;

Can this be achieved with something like:

async function exportConfig() {
  module.exports = await configPromise;
}

exportConfig();

Has anyone achieved such an asynchronous loading of the vue.config.js at build time?

Answer 1

The configureWebpack option doesn't support Promises yet, meanwhile you can fetch the data before running the build

Additional note: if some routes fetch data from a remote API while prerendering , and the API does not support CORS, you need to configure a proxy .

Example:

// build.prerender.js
const prerenderConfig = {
  // ...
  server: {
    proxy: {
      '^/api': {
        target: process.env.API_URL,
        pathRewrite: {
          '^/api' : ''
        }
      }
    }
  }
}

module.exports = (api) => {
  // @api refers to vue-cli api
  api.registerCommand('build:prerender', async (args) => {
    const { routes } = await fetch(...)
    prerenderConfig.routes = routes
    api.chainWebpack(config => {
      config
        .plugin('prerender')
        .use(PrerenderSPAPlugin, [prerenderConfig])
        .end()
    })

    await api.service.run('build', args)
  })
}