在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 插件。

// 导入内部jsimport 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>