问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

VUE中如何保证script标签引入的JS已经加载完成?

头像
issmile
    94929159184

    clipboard.png
    如图vue中通过script 标签引入外部JS,

    mounted 的时候执行外部js的方法时报错

    clipboard.png

    应该是script 引入的这个js 还未加载完成造成的,加载完成后,手动输入这个变量就不是未定义了

    clipboard.png
    所以,要修复这个BUG的话,必须保证外部js 加载完成,但是我不知道如何保证JS加载完成.....请问大神们这要怎么弄呢?

    vue.jsjavascriptnode.jshtml5
    阅读 16.9k
    3 个回答
    得票最新
    头像
    yuanxiaowa
      10.1k3938

      监听onload事件

      var scriptEle = document.createElement('script')
scriptEle.onload = function() {
    console.log('加载完了')
}
document.body.appendChild(scriptEle)
      头像
      luozz
        5.8k3629

        谢邀！

        推荐在main.js中引入echarts并注册到vue的原型上！
        1、npm install echarts --save
        2、在main.js中：

        import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

        3、现在可以在全局vue获取到注册到原型上的$echarts

        一点建议，一般echarts在使用之前都需要进行初始化，所以在vue中初始化最好这么做：

        mounted() {
    //将对象先获取到并存储起来，下面要用到的地方直接用存储起来的对象便可
    //后面的对象除了使用document获取id以外，还可以通过ref的方式，具体可以自己尝试
    //推荐使用ref来获取对象
    this.obj_echarts = this.$echarts.init(document.getElementById('xxx'));
},
data(){
    return {
        obj_echarts: null
    }
}
        希望我的回答对你有所帮助！
        头像
        KingMario
          7.2k31429

          现代浏览器应该是按顺序加载 js 的，因此在 head 里的 js 肯定会比 webpack 打包后插入的 js 先加载。

          简单代码验证如下：

          <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Order Test</title>

  <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>
</head>
<body>
  
  <script>
    console.log(echarts)
  </script>
</body>
</html>

          按理不会出现你所说的这个问题，但既然出现这样的问题了，webpack externals 配置了解一下。

          https://webpack.js.org/config...

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题