내 구성 요소 인 VUE 2 (webpack)에 외부 js 파일을로드하는 방법은 무엇입니까?

Question

나는 이미 보았고 찾지 못했습니다. 외부 js 파일의 URL이 있는데 index.html에서 가져옵니다. 응용 프로그램이 시작될 때 파일이로드 중입니다.

그러나 사용자는 기능을 자주 사용하지 않습니다. 그리고 특정 구성 요소가 호출되었을 때만이 파일을 업로드하고 싶습니다.

템플릿 webpack과 함께 vue cli (vue 2)를 사용하고 있습니다.

내가 좋아하는 뭔가를 시도했다 :

import * as PagSeguroDirectPayment from 'https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js'; 

required('https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js'); 

을 그리고 그들은 작동하지 않습니다.

은 결제 게이트웨이를 사용하려면이 파일을 업로드해야합니다. 누구든지 나를 도울 수 있습니까?

Answer 1

이것은 vue가 가지고있는 기능 중 하나로서, 실제로 생각해 낸 것입니다. 그런 일을 실제로하는 것은 슈퍼 쉽게입니다.

나는이처럼 내 노선이 사용하고 있습니다 웹팩와 함께 사용하면,이 각각의 구성 요소에 대한 개별 파일을 생성합니다

// home gets loaded always 
const Home = import('@/pages/home') 

// profile and account gets loaded on demand 
const Profile =() => import('@/pages/profile') 
const Account =() => import('@/pages/account') 

. (01.js, 02.js 등)이 파일들은 필요에 따라로드됩니다.