在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')。