Vue 组件中如何引入外部的js文件
背景
在Vue中,通常我们引入一个js插件都是使用npm
方式下载然后import
使用的。但是我现在本地有了js文件或者是一个远程js文件链接,我不想使用npm install xxx
的方式,有什么办法吗?
方式一
简单粗暴,直接在Vue项目的index.html
中使用全局的方式引入,比如:
<!DOCTYPE html>
<html><head><!-- ... 省略--><title>测评</title><link type="text/css" href="//at.alicdn.com/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' //注意路径
缺点:
下载的本地静态文件才可以,远程js文件不可以。
方式三
在Vue组件加载完后,手动操作DOM插入js插件。
export default {mounted() {let script = document.createElement('script');script.type = 'text/javascript';script.src = '你的js文件地址';document.body.appendChild(script);},
}
该方式直接操作DOM,只在当前组件插入js插件。
方式四
使用 render
方法。
export default {components: {'xxx-js': {render(createElement) {return createElement('script',{attrs: {type: 'text/javascript',src: '你的js文件地址',},},);},},},
}
// 使用 <xxx-js></xxx-js> 在页面中调用
使用的时候,使用 <xxx-js></xxx-js>
在页面中调用。
方式五
高阶玩法。将方式三
包装成一个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 './loadJs'export default {mounted(){loadJs('http://api.map.baidu.com/xxx.js').then(()=>{// 加载成功,进行后续操作})}
}
方式六
更高阶方式。可以动态替换要加载的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="https://pv.sohu.com/cityjson?ie=utf-8"></remote-script>
https://zhuanlan.zhihu.com/p/379504188