Vue.js - Javascript Dynamic Imports를 사용하여 다른 서버에서 컴포넌트를 로드할 수 있습니까?

Vue.js - Javascript Dynamic Imports를 사용하여 다른 서버에서 컴포넌트를 로드할 수 있습니까?

맥락

REST API 백엔드의 UI로 Vue.js 애플리케이션을 생성해야 합니다.모든 클라이언트에 대해 표시됩니다.

이 응용 프로그램은 처리할 항목 목록을 표시합니다(작은 워크플로우: open, progress, done).

예를 들어 목록을 다른 레이아웃으로 표시하거나 내부 응용프로그램에서 추가 데이터를 사용하여 표시하기를 원하는 고객도 있습니다.

내 아이디어

따라서 이러한 클라이언트의 특정 Vue.js 컴포넌트를 작성해야 하지만 이러한 클라이언트의 모든 컴포넌트로 메인 애플리케이션 코드 베이스를 "오염"시키고 싶지는 않습니다.이러한 뷰를 전용 코드 베이스로 처리해 주세요.

어플리케이션을 사용하는 클라이언트에 따라 다이내믹 Import / 비동기 컴포넌트(Dynamic Import를 사용한 최적화 및 다이내믹 Import를 위한 공식 Vue.js 문서)를 사용하여 이들 컴포넌트를 로드할 수 있는지 궁금합니다.이러한 컴포넌트는 메인 Vue.js 어플리케이션에 서비스를 제공하는 서버가 아닌 다른 서버에서 로드됩니다.

---

컴포넌트를 동적으로 로드하는 실제 방법은 다음과 같습니다.

'my-component': () => import('./my-async-component')

다음과 같은 작업을 수행할 수 있습니까?

'my-component': () => import('http://myspecificclient.mydomain.com/my-async-component')

---

동적 로딩은 특히 Webpack과 관련된 것으로 여기서 문제가 될 수 있다는 것은 알고 있습니다만, 저는 Webpack에 대한 지식이 부족하여 원하는 것이 적절한지 알 수 없습니다.

Markus Oberlehner의 최신 기사(2019년 4월 7일)는 이를 위한 방법을 제시한다.

https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/?utm_source=Vue.js+개발자&utm_campaign=a23e0b1135-EMAIL_CAMPAIN_2019_04_02_10_08_COPY_01&utm_medium=email&utm_term=0_a2_tm=0_ae2f1465e01135-201311157

발췌:

// This does not work.
const MyComponent = () => import('https://distribution.server/MyComponent.js');

이상적으로는 위의 그림과 같이 할 수 있습니다.그러나 웹 팩도 import()의 네이티브 구현도 외부 리소스를 처리할 수 없기 때문에 이 방법은 작동하지 않습니다.

다음 코드 스니펫 예시는 외부 리소스로 동작하는Import()의 실장을 확인할 수 있습니다.

// src/utils/external-component.js
export default function externalComponent(url) {
  return new Promise((resolve, reject) => {
    const name = url.split('/').reverse()[0].match(/^(.*?)\.umd/)[1];
    const script = document.createElement('script');
    script.async = true;
    script.addEventListener('load', () => {
      resolve(window[name]);
    });
    script.addEventListener('error', () => {
      reject(new Error(`Error loading ${url}`));
    });
    script.src = url;
    document.head.appendChild(script);
  });
}

import externalComponent from '../utils/external-component';

const MyComponent = () => externalComponent('http://localhost:8200/MyComponent/MyComponent.c9c0abb8e999d0e5654e.umd.min.js');

export default {
  name: 'MyOtherComponent',
  components: {
    MyComponent,
  },
  // ...
}

에이잭스를 사용할 수 있을 것 같은데...

var xhr = new XMLHttpRequest;

xhr.open('GET', '[Your url here]', true)

하지만 다른 서버에서 가져오고 싶다고 하셨기 때문에 잘 모르겠습니다.

언급URL : https://stackoverflow.com/questions/54763605/vue-js-is-it-possible-to-use-javascript-dynamic-imports-to-load-components-fro