在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>
发表回复