在Vue Webpack Cli中获取通过axios的路由列表

Question

我在我的Vue Webpack Cli项目中使用prerender-spa-plugin。像从文档我正在注册的插件在webpack.prod.conf.js这样

... 
plugins: [ 
    ... 
    new PrerenderSpaPlugin(
    path.join(__dirname, '../dist'), 
    ['/', '/about', '/contact'], 
    { 
     captureAfterTime: 5000 
    } 
) 
] 

我想知道是否有可能通过爱可信调用来获取路线数组列表。 我尝试没有成功如下：

var routes = axios.get('http://myapi.com/api').then(function (response) { 
    return response.map(function (response) { 
    return '/base/' + response.slug 
    }) 
}) 

plugins: [ 
    ... 
    new PrerenderSpaPlugin(
    path.join(__dirname, '../dist'), 
    routes, 
    { 
     captureAfterTime: 5000 
    } 
) 
] 

由于我的JavaScript知识贫乏，我不能够解决这个问题。谢谢任何提示。

问候

Answer 1

目前这是不行的（或至少可靠地工作），因为的WebPack假设你的配置是默认同步。为了解决这个问题，请使用Webpack对asynchronous configuration的支持，并返回在您的路由请求后解决的承诺。

如果您处于支持async/await（节点8+）的环境中，那么它与导出async函数一样简单。否则，返回一个new Promise：

// webpack.conf.js 
module.exports = async function() { 
    const response = await axios.get('http://myapi.com/api') 
    const routes = response.map((response) => { 
    return '/base/' + response.slug 
    }) 

    return { 
    plugins: [ 
     // ... 
     new PrerenderSpaPlugin(
     path.join(__dirname, '../dist'), 
     routes, 
     { 
      captureAfterTime: 5000 
     } 
    ) 
    ] 
    } 
} 

如果这不是一个选项，你总是可以有一个任务，使这个请求，将其写入json文件，然后在你的配置require('./route-response.json')。