胖蔡叨叨叨
你听我说

如何在vue中引入外部的js库

前段时间有朋友问如何在vue中引入外部的js文件。乍一听觉得奇怪,不是可以通过yarn,npm工具去下载依赖引入吗?仔细了解才知道有些三方的JS比较古早,并不支持vue的方式去模块化引又或者远程环境容易被墙,我就想要直接引用下载好的三方库,这时候我们该如何引入呢?

 

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加载失败
      }

   },
}

 

如上,在插入下载结束后通过回调监听是否下载成功。

 

创作不易,感觉对你有用的话就点下广告支持下作者呗!

 

赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » 如何在vue中引入外部的js库
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏