乐趣区

关于vue.js:Vue组件中如何引入外部的js文件

jiezi

在 Vue 中，通常咱们引入一个 js 插件都是应用 npm 形式下载而后 import 应用的。然而我当初本地有了 js 文件或者是一个近程 js 文件链接，我不想应用 npm install xxx 的形式，有什么方法吗？

办法 1

简略粗犷，间接在 Vue 我的项目的 index.html 中应用全局的形式引入，比方：

<!DOCTYPE html>
<html>
<head>
    <!-- ... 省略 -->
</head>
<body>
    <div id="app"></div>
</body>
<script src="../xxx.js"></script> // 暴力引入
</html>

毛病：不应用该 js 插件的组件也会加载，而我只想在某个 Vue 组件中应用该 js 插件。

办法 2

如果是下载到本地的动态文件，能够应用 import 的形式导入。

import {xxx} from '门路'

毛病：下载的动态文件才能够

办法 3

在 Vue 组件加载完后，手动操作 DOM 插入 js 插件。

export default {mounted() {let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '你的 js 文件地址';
        document.body.appendChild(script);
    },
}

该形式间接操作 DOM，只在以后组件插入 js 插件。

办法 4

应用 render 办法 

export default {
    components: {
        'xxx-js': {render(createElement) {
                return createElement(
                    'script',
                    {
                        attrs: {
                            type: 'text/javascript',
                            src: '你的 js 文件地址',
                        },
                    },
                );
            },
        },
    },
}
// 应用 <xxx-js></xxx-js> 组件形式在页面中调用

办法 5

高阶玩法。将形式三包装成一个 js 插件，应用 Promise，js 加载胜利，调用 resolve，js 加载失败，调用 reject。

function loadJs(src) {return new Promise((resolve,reject)=>{let script = document.createElement('script');
    script.type = "text/javascript";
    script.src= src;
    document.body.appendChild(script);
      
    script.onload = ()=>{resolve();
    }
    script.onerror = ()=>{reject();
    }
  })
}
 
export default loadJs

应用的时候：

import loadJs from '../../utils/base/loadJs'
   
export default {mounted(){loadJs('http://api.map.baidu.com/xxx.js').then(()=>{// 加载胜利，进行后续操作})
    }
}

办法 6

更高阶形式。能够动静替换要加载的 js 文件。

包装一个 importJs.js 插件。

// 导入内部 js
import Vue from 'vue'
 
Vue.component('remote-script', {render: function (createElement) {
    var self = this;
    return createElement('script', {
      attrs: {
        type: 'text/javascript',
        src: this.src
      },
      on: {load: function (event) {self.$emit('load', event);
        },
        error: function (event) {self.$emit('error', event);
        },
        readystatechange: function (event) {if (this.readyState == 'complete') {self.$emit('load', event);
          }
        }
      }
    });
  },
  props: {
    src: {
      type: String,
      required: true
    }
  }
});

应用形式：

// 引入
import '@/common/importJs.js'
// html 应用的中央
<remote-script src="js 文件门路"></remote-script>
退出移动版