Vue引入遠程JS文件的方法

這篇文章給大家分享的是有關Vue引入遠程JS文件的方法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

問題

最近在使用 Vue 做東西，用到釘釘掃描登錄的功能，這里需要引入遠程的 js 文件，因為 Vue 的方式跟之前的不太一樣，又不想把文件下載到本地應用，找了一下解決的方法，貌似都需要引入第三方的庫，最后找到了解決方案，分享之。

思路

一開始的思路是在 Vue 加載完 Dom 之后（mounted），使用 JavaScript 腳本在 body 中插入遠程的腳本文件。

后來發現了 Vue 的 createElement 方法，簡單的封裝一個組件解決問題。

解決方法

第一版代碼（直接在操作 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引入遠程JS文件的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！