Vue 組件中如何引入外部的js文件
背景
在Vue中，通常我們引入一個js插件都是使用npm?方式下載然后import使用的。但是我現(xiàn)在本地有了js文件或者是一個遠程js文件鏈接，我不想使用npm install xxx?的方式，有什么辦法嗎？
方式一
簡單粗暴，直接在Vue項目的index.html?中使用全局的方式引入，比如：
<!DOCTYPE html>
<html>
<head>
<!-- ... 省略-->
<title>測評</title>
<link type="text/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插件。?
方式二
如果是下載到本地的靜態(tài)文件，可以使用?import?的方式導入。
import { xxx } from '../js/xxx.js' //注意路徑
缺點：
下載的本地靜態(tài)文件才可以，遠程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> 在頁面中調(diào)用
使用的時候，使用?<xxx-js></xxx-js>?在頁面中調(diào)用。
方式五
高階玩法。將方式三包裝成一個js插件，使用?Promise，js加載成功，調(diào)用resolve，js加載失敗，調(diào)用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(()=>{
// 加載成功，進行后續(xù)操作
})
}
}
方式六
更高階方式。可以動態(tài)替換要加載的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>
?文章來源：http://www.zghlxwxcb.cn/news/detail-480521.html
https://zhuanlan.zhihu.com/p/379504188文章來源地址http://www.zghlxwxcb.cn/news/detail-480521.html
到了這里，關于Vue 組件中如何引入外部的js文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
