get Vue Webpack Cli의 axios를 통한 경로 목록

Question

내 Vue Webpack Cli 프로젝트에서 prerender-spa-plugin을 사용하고 있습니다. Axios의 호출을 통해 경로 배열의 목록을 얻을 수있을 것입니다 경우 문서에서 내가이

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

처럼 webpack.prod.conf.js의 플러그인을 등록하는 것 같은 궁금하네요. 내가 성공하지 않고 다음과 같은 시도 :

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

내 자바 스크립트 지식이 좋지 때문에

내가이 문제를 해결 할 수 아니에요. 어떤 힌트를 주셔서 감사합니다.

안부

Answer 1

웹팩이 구성은 기본적으로 동기 가정하기 때문에이 현재 (안정적 또는 적어도 작업) 작동하지 않습니다. 이 문제를 해결하려면 asynchronous configuration에 대한 Webpack의 지원을 사용하고 경로 요청 후에 해결 된 약속을 반환하십시오.

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')을 가질 수 있습니다.