方法一
1.在main.js中引入
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
}
}
});
2.在所需要的引入外部js的頁(yè)面使用
src地址里面填要引入js文件的地址即可：
<remote-script src=""></remote-script>
第二則方法 ：
在普通的項(xiàng)目中质况，我們可以通過(guò)來(lái)引入外部的js文件，但是在Vue項(xiàng)目中，就不可以使用這種方式了定页，需要使用ES6語(yǔ)法來(lái)引入鳍悠，同時(shí)還要對(duì)已有的js文件做相應(yīng)的修改。
一般情況下月洛，我們引入外部js文件，是要調(diào)用js文件中的函數(shù)孽锥。在Vue項(xiàng)目中嚼黔，我們首先要使用export命令將這個(gè)函數(shù)拋出，然后才能在其他的Vue組件中使用import命令引入惜辑。同時(shí)還要注意外部js腳本的存放位置唬涧，不能放在components文件夾下。
一盛撑、修改外部js腳本
比如有一個(gè)實(shí)現(xiàn)MD5加密算法的js腳本文件碎节，代碼如下：
var MD5 = function (string) {
// 這里是MD5的具體實(shí)現(xiàn)算法
}
如果我們?cè)谄渌腣ue組件中想要引入MD5函數(shù)，那么要在MD5加密算法的js腳本的最后抵卫，使用如下代碼狮荔，將MD5函數(shù)導(dǎo)出：
export {
MD5
}
最后還是要提示一下，這個(gè)外部腳本不要放在components文件夾下介粘，否則會(huì)一直報(bào)錯(cuò)殖氏。可以在src文件夾下新建一個(gè)js文件夾姻采，然后將外部js腳本放在這個(gè)文件夾下雅采，然后就可以在其他Vue組件中引入該js腳本。
二慨亲、在Vue組件中引入js組件
在組件中使用import { 函數(shù)名 } from 外部腳本名來(lái)從外部js腳本中導(dǎo)入我們需要使用的函數(shù)婚瓜。比如我們要從md5.js腳本中導(dǎo)入MD5函數(shù)，使用以下代碼：
import { MD5 } from '../js/md5'
這樣巡雨，我們就可以在這個(gè)Vue組件中正常調(diào)用MD5函數(shù)了闰渔，代碼如下：
created: function () {
console.log(MD5("66666"));
}
如果引入的外部js文件不是一個(gè)函數(shù)，要把這個(gè)js用函數(shù)包起來(lái)先export出去铐望，然后在使用import或require導(dǎo)入
第三種方法
如果要引入第三方JS或者css 最好是把文件放在statis文件夾下冈涧，此處是靜態(tài)文件存放的位置
第一種方法：
直接在index.html中引入
js
<script type="text/javascript" src="static/mui.min.js" ></script>
css
<link rel="stylesheet" href="static/mui.min.css" />
第二種 在單頁(yè)面中用import方法導(dǎo)入
js
import mui from '../../../static/mui.min.js'
css
@import "../../common/stylus/mixin";
import引入 要寫(xiě)好路徑即可
第三種 在mian.js中引入css，代碼如下
import 'static/css/main.css'
這樣就可以直接使用了
