전체 URL로 VueJS의 구성 요소를 비동기 적으로 가져 오는 방법

Question

상대 URL과 반대되는 전체 URL로 비동기 적으로 Vue 구성 요소를 가져와야합니다. VueJS documentation에서 가져온 다음 예는

Vue.component(
    'app-component-one', 
() => import('./component-from-app-one') 
) 

는하지만, 내 목표는 동일한 서버에 배포있어 별도의 프로젝트에서 구성 요소를 가져 오는 것입니다 같은 프로젝트 내에서 구성 요소에 대해 잘 작동합니다. 난 ... 전체 URL을 사용하여 같은 뭔가를 할 수

Vue.component(
    'app-component-two', 
    () => import ('http://sample-domain.com/project-2/components/component-from-app-two.vue') 
) 

을 기대했다하지만 그것은과 오류 발생 : 전체 URL에 의해 가능

This dependency was not found: 
* http://sample-domain.com/app-2/components/component-from-app-two.vue in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/SampleComponent.vue 

가져 오는 요소를? 미리 감사드립니다!

Answer 1

Vue 웹 사이트에서 참조한 예제는 code-splitting functionality from WebPack을 활용하므로 동일한 프로젝트에 속하지 않는 파일을로드하는 데는 효과가 없습니다.

일반적으로 "동적/비동기식 ES6 모듈로드"라고합니다. 너무 깊이 들어가서는 안되지만 현재 import blah from X은 정적 가져 오기 만 지원합니다. 이 부분에 대한 자세한 내용은 .. TC39 proposal for dynamic imports in JS

......... 우리 필사자는 SystemJS과 같은 도구에 의존해야합니다.이 도구는 사용자가 원하는 것을 정확하게 수행합니다.

그러나 @divine에서 언급 한 것처럼 ... 독립 실행 형 Vue 구성 요소를 생성하는 빌드 프로세스가 필요합니다. WebPack 또는 RollUp을 사용하여 UMD로 내보낼 수 있으며 SystemJS를 사용하여 전체 URL을 참조하여 해당 구성 요소를 가져올 수 있습니다 (도메인이 CORS를 지원한다고 가정하면 다른 도메인에서 가져올 수도 있습니다)