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

Question

我正在尝试将一些数据异步加载到我的 Vue.js 应用程序的配置中，以供 Chris Fritz 的 PrerenderSPA webpack 插件使用，但是 - 它似乎没有预渲染任何路由。

当我对这些值进行硬编码时 - 它们被预渲染得很好，但在尝试异步加载 webpackConfiguration 时似乎失败了。

这是我的淡化尝试：

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;

这可以通过以下方式实现吗：

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

exportConfig();

有没有人在构建时实现了 vue.config.js 这样的异步加载？

Answer 1

configureWebpack 选项还不支持 Promises，同时你可以fetch the data before running the build

补充说明：如果某些路由在预渲染过程中从远程 API 获取数据，并且该 API 不支持 CORS，则需要配置 proxy。

例子：

// 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)
  })
}