Vue 원 격 JS 파일 도입 방법

문제.
최근 에 Vue 를 사용 하여 물건 을 만 들 고 압정 스 캔 으로 로그 인 하 는 기능 을 사용 합 니 다.여 기 는 원 격 js 파일 을 도입 해 야 합 니 다.Vue 의 방식 이 이전 과 다 르 고 로 컬 애플 리 케 이 션 에 파일 을 다운로드 하고 싶 지 않 기 때문에 해결 방법 을 찾 았 습 니 다.모두 제3자 라 이브 러 리 를 도입 해 야 할 것 같 습 니 다.마지막 으로 해결 방안 을 찾 아 공유 합 니 다.
사고의 방향
처음에는 Vue 에서 Dom 을 불 러 온 후mounted자바 스 크 립 트 스 크 립 트 를 사용 하여 body 에 원 격 스 크 립 트 파일 을 삽입 하 는 것 이 생각 이 었 습 니 다.
나중에 Vue 의createElement 방법 을 발견 하여 하나의 구성 요 소 를 간단하게 포장 하여 문 제 를 해결 했다.
해결 방법
제1 판 코드(Dom 을 직접 조작)는 다음 과 같다.

export default {
 mounted() {
  const s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js';
  document.body.appendChild(s);
 },
}

createElement 방법 사용 하기:

export default {
 components: {
  'dingtalk': {
   render(createElement) {
    return createElement(
     'script',
     {
      attrs: {
       type: 'text/javascript',
       src: 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js',
      },
     },
    );
   },
  },
 },
}

//    <dingtalk></dingtalk>       

최종 안
구성 요소 패키지remote-js 를 통 해 구현:

export default {
 components: {
  'remote-js': {
  render(createElement) {
   return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});
  },
  props: {
   src: { type: String, required: true },
  },
 },
 },
}

사용 방법:

<remote-js src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js">
</remote-js>

처음에 Vue 를 배우 기 시 작 했 는데 무슨 문제 가 있 는 지 여러분 의 지적 을 환영 합 니 다.여러분 의 학습 에 도움 이 되 고 저희 도 많이 응원 해 주시 기 바 랍 니 다.