전체 URL을 사용하여 VueJ의 구성 요소를 비동기적으로 가져오는 방법

전체 URL을 사용하여 VueJ의 구성 요소를 비동기적으로 가져오는 방법

상대 URL이 아닌 전체 URL을 기준으로 Vue 구성 요소를 비동기적으로 Import해야 합니다.VueJS 매뉴얼에서 인용한 다음 예시는 같은 프로젝트 내의 컴포넌트에 대해서만 정상적으로 동작합니다.

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

다만, 같은 서버에 전개되어 있는 다른 프로젝트에서 컴포넌트를 Import 하는 것이 목표입니다.저는 풀 URL을 사용하여 다음과 같은 작업을 할 수 있기를 희망합니다.

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

다음과 같은 오류가 발생합니다.

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

전체 URL로 컴포넌트 Import가 가능한가요?잘 부탁드립니다!

Vue 웹 사이트에서 참조한 예에서는 WebPack의 코드 분할 기능을 사용하고 있기 때문에 같은 프로젝트의 일부가 아닌 파일을 로드할 수 없습니다.

이를 보통 "동적/비동기적 ES6 모듈 로드"라고 합니다.너무 깊이 파고들지 않도록..하지만 물살은import blah from X는 스태틱 Import만 지원합니다.이 세부 사항에 대해 좀 더 관심을 가지신다면..JS에서 동적 가져오기를 위한 TC39 제안이 있다.

그동안에…...인간은 시스템과 같은 도구에 의존해야 합니다.JS는 당신이 원하는 것을 정확히 해 줄 것입니다.

하지만 @divine이 언급한 것처럼...독립 실행형 Vue 구성 요소를 생성하는 빌드 프로세스 유형이 필요합니다.WebPack 또는 RollUp 중 하나를 사용하여 UMD로 내보낼 수 있으며 시스템 사용JS는 전체 URL을 참조하여 해당 컴포넌트를 Import합니다(도메인이 CORS를 지원하는 것으로 가정하여 다른 도메인에서 Import할 수도 있습니다).

언급URL : https://stackoverflow.com/questions/47985362/how-to-asynchronously-import-components-in-vuejs-by-full-url