胖蔡说技术
前段时间有朋友问如何在vue中引入外部的js文件。乍一听觉得奇怪，不是可以通过yarn，npm工具去下载依赖引入吗？仔细了解才知道有些三方的JS比较古早，并不支持vue的方式去模块化引又或者远程环境容易被墙，我就想要直接引用下载好的三方库，这时候我们该如何引入呢？
[wptao _title=”【官方旗舰店】vue.js设计与实现书籍” price=”83.9″ url=”https://detail.tmall.com/item.htm?id=668018208673″ _price=”119.8″ site=”天猫” 
][/wptao]
Html中引入
最简单的方式就比较简单粗暴了，直接在项目中的index.html中引入三方js。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="user-scalable=0,width=device-width, initial-scale=1.0"> <!-- 引入iconfont图标 --> <script src="<%= BASE_URL %>iconfont.js" defer ></script> <link rel="stylesheet" href="<%= BASE_URL %>iconfont.css" /> <title> <%= webpackConfig.name %> </title> </head> <body> <noscript> <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> <script></script> </body> </html>
通过defer实现js的异步加载，等待文件下载完成后才执行该js，若存在多个js的话也会根据顺序去执行。
VUE中通过JS手动插入DOM
我们可以根据Vue的加载周期通过js手动创建一个script标签并插入到dom中，这样等dom更新的时候就会自动更新下载了。
export default {
mounted() {
let script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.src = ‘//at.alicdn.com/t/font_2741962_jliv7rnraus.js’;
document.body.appendChild(script);
script.onload = ()=>{
// js加载成功
}
script.onerror = ()=>{
// js加载失败
}
},
}
如上，在插入下载结束后通过回调监听是否下载成功。
创作不易，感觉对你有用的话就点下广告支持下作者呗！
