Vue 구성 요소에서 서드파티 Javascript 라이브러리 사용

Vue 구성 요소에서 서드파티 Javascript 라이브러리 사용

이 질문에는 이미 답변이 있습니다.

NPM 또는 Webpack을 사용하지 않고 CDN을 VueJS CLI에 포함하려면 어떻게 해야 합니까? (3개의 답변)

닫힘4년 전에요.

웹 팩과 VueJs 2를 사용하고 있습니다.내 컴포넌트에 다음과 같은 서드파티 javascript 라이브러리를 사용하고 싶다.

<script async defer src="https://apis.google.com/js/api.js" ... ></script>

여기서 npm 패키지에 대한 방법을 알아보았는데, 이 라이브러리는 npm 패키지로 사용할 수 없기 때문에 사용할 수 없습니다.

라이브러리가 변경되어 동작이 정지될 수 있기 때문에 로컬로 파일을 다운로드하여 사용할 수 없습니다.따라서 브라우저에 의해 페이지가 로드될 때마다 링크에서 로드되어야 합니다.

나는 여기서 하나의 가능한 해결책을 찾았지만 그것은 기본적으로 해킹이다.script문서 로드 후 요소)

이것은 일반적인 사용 사례라고 생각하기 때문에 이 문제에 대한 간단한 모범 사례 솔루션이 있을 것이라고 생각합니다.

업데이트: 인덱스 파일의 헤드 태그 안에 스크립트를 넣으면 모든 컴포넌트에 대해 스크립트가 로드됩니다.성능상의 이유로 특정 컴포넌트에 대해서만 로드하고 싶습니다.

내가 아는 한, 당신이 더 나은 것을 사용할 수 있는 방법은 없습니다.script페이지 선두에 동적으로 태그를 붙입니다.단, 이를 처리하기 위해 작은 플러그인을 생성하여 원하는 컴포넌트에 한 번만 스크립트를 로드할 수 있습니다.

먼저 플러그인 자체부터 살펴보겠습니다.

import Vue from 'vue'

const scriptLoader = {
    loaded: [],
    load (src) {
        if (this.loaded.indexOf(src) !== -1) {
            return
        }

        this.loaded.push(src)

        if (document) {
            const script = document.createElement('script')
            script.setAttribute('src', src)
            document.head.appendChild(script)
        }
    }
}

Vue.use({
    install () {
        Vue.prototype.$scriptLoader = scriptLoader
    }
})

보시다시피 오브젝트를 만듭니다.scriptLoader캐시 오브젝트 같은 것을 포함하고 있습니다.loaded응용 프로그램에서 이미 로드한 스크립트를 기억합니다.또,load()스크립트를 머릿속에 추가하는 방법을 지정합니다.

조건if (document)서버 측에서 앱을 렌더링할 경우에 대비하여 여기에 있습니다.document존재하지 않습니다.

그런 다음 스크립트를 작성 시 임의의 컴포넌트에 로드할 수 있습니다.created후크:

export default {
    ...
    created () {
        this.$scriptLoader.load('https://apis.google.com/js/api.js')
    }
}

그런 대본을 다룰 수 있는 가장 깔끔한 방법인데...이게 도움이 됐으면 좋겠는데...

네, 모든 요건을 충족하는 솔루션을 찾았습니다.

• 스크립트는 웹에서 다운로드되므로 npm 패키지는 필요 없습니다.
• 스크립트는 필요한 경우에만 특정 컴포넌트에 대해 로드됩니다.
• 추악한 돔 조작 없음

index.를 inside index.html에 합니다.v-if

<script v-if="loadGoogleAPI" async defer src="https://apis.google.com/js/api.js" ... ></script>

파일 (「」).vue를 「마음껏」으로 합니다.true:

<script>
export default {
  ...
  loadGoogleAPI: true,
  data() {
  ...
  }
};
</script>

언급URL : https://stackoverflow.com/questions/49365983/use-3rd-party-javascript-library-in-vue-component