我正在尝试将一些数据异步加载到我的 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 的这种异步加载?
最佳答案
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)
})
}