Vue组件中如何引⼊外部的js⽂件
背景
在Vue中，通常我们引⼊⼀个js插件都是使⽤npm ⽅式下载然后import使⽤的。但是我现在本地有了js⽂件或者是⼀个远程js⽂件链接，我不想使⽤npm install xxx 的⽅式，有什么办法吗？
⽅式⼀
简单粗暴，直接在Vue项⽬的index.html 中使⽤全局的⽅式引⼊，⽐如：
<!DOCTYPE html>
<html>
<head>
<!-- ... 省略-->
<title>帮BOSS | 测评</title>
<link type="text/css" href="//at.alicdn/t/font_43459_d124thd3lgu.css" rel="stylesheet">
{{ie9 /resources/js/history.min.js}}
</head>
<body>
<div id="cp-app" v-cloak></div>
</body>
<script src="../xxx.js"></script> // 暴⼒引⼊
</html>
缺点：不使⽤该js插件的组件也会加载，⽽我只想在某个Vue组件中使⽤该js插件。
⽅式⼆
如果是下载到本地的静态⽂件，可以使⽤import 的⽅式导⼊。
import { xxx } from '../js/xxx.js' //注意路径
缺点：下载的静态⽂件才可以
⽅式三
在Vue组件加载完后，⼿动操作DOM插⼊js插件。
export default {
mounted() {
let script = ateElement('script');
script.src = '你的js⽂件地址';
document.body.appendChild(script);
},
}
该⽅式直接操作DOM，只在当前组件插⼊js插件。
⽅式四
使⽤render⽅法
components: {
'xxx-js': {
render(createElement) {
return createElement(
'script',
{
attrs: {
type: 'text/javascript',
src: '你的js⽂件地址',
},
},
);
},
},
},
}
// 使⽤ <xxx-js></xxx-js> 在页⾯中调⽤
⽅式五
⾼阶玩法。将⽅式三包装成⼀个js插件，使⽤ Promise，js加载成功，调⽤resolve，js加载失败，调⽤reject。
function loadJs(src) {
return new Promise((resolve,reject)=>{
let script = ateElement('script');
script.src= src;
document.body.appendChild(script);
resolve();
}
reject();
}
})
}
export default loadJs
使⽤的时候：
import loadJs from '../../utils/base/loadJs'
export default {
mounted(){
loadJs('api.map.baidu/xxx.js').then(()=>{
// 加载成功，进⾏后续操作
})
}
}
⽅式六
更⾼阶⽅式。可以动态替换要加载的js⽂件。
包装⼀个importJs.js 插件。
import Vue from 'vue'
Vueponent('remote-script', {
vuejs流程图插件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 (adyState == 'complete') {
self.$emit('load', event);
}
}
}
});
},
props: {
src: {
type: String,
required: true
}
}
});
使⽤⽅式：
// 引⼊
import 'common/importJs.js'
// html使⽤的地⽅
<remote-script src="pv.sohu/cityjson?ie=utf-8"></remote-script>（完）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。