vue 引用src中的文件_Vue中引用第三方JS文件

使用Vue时会经常使用jQuery、bootstrap这类第三方工具库，而boostrap的渲染不仅依赖于jQuery js文件的加载，也依赖于HTML中DOM树内容的加载。但Vue中DOM树是有Vue的app.js动态生成，因此js文件的引用顺序关系boostrap是否能够渲染成功。

以下没有贴所有的代码，可能有信息缺失引起歧义，可以发送邮件到hugh@inner-peace.cn咨询和探讨。

遇到这个场景，最开始会使用的错误方法会在index.html中如下编写代码。

以上的代码是希望使用jQuery和boostrap完成一个scroll的控件功能，但实际上是不能实现的，主要因为VUE构建项目会更新index.html，并在自动在之前增加一行代码

app.js动态构建DOM树，这导致提前加载的jquery.slimscroll.js和bootstrap.bundle.min.js是无法找到对应的DOM elements进行渲染。

解决这个问题，需要使用以下方式。

增加utils.js，export一个自己编写的LoadJS函数

export function LoadJS (p, callback) {

const oScript = document.createElement('script');

oScript.type = 'text/javascript';

oScript.src = p;

if (oScript.onreadystatechange) {

oScript.onreadystatechange = function () {

if (this.readyState === 'complete' || this.readyState === 'loaded') {

oScript.onreadystatechange = null;

if (callback != null) {

callback();

}

}

};

} else {

oScript.onload = function () {

if (callback != null) {

callback();

}

};

}

document.body.appendChild(oScript);

}

之后在components中的VUE文件中使用

import {LoadJS} from '../assets/js/utils.js';

LoadJS('/static/js/jquery.min.js', function () {

LoadJS('/static/js/bootstrap.bundle.min.js', null);

LoadJS('/static/js/jquery.slimscroll.js', null);

});

export default {

name: 'Example',

components: {Example}

};

为什么针对jquery.min.js需要使用callback，是因为LoadJS调用后是异步load js文件，可能导致先load完bootstrap.bundle.min.js，之后在load完jquery.min.js，这样会导致boostrap找不到jQuery而报错，因此需要基于callback实现同步等待的机制。