Vue引入js脚本问题记录（附解决办法）

目录

一、需求

二、import引入问题记录

三、解决方式

---

一、需求

我想在我的Vue项目中引入jquery.js和bootstrap.js这种脚本文件，但发现不能单纯的import引入，问题如下。

二、import引入问题记录

我直接这么引入，发现控制台报错TypeError: Cannot set properties of undefined (setting 'bootstrap')。

原因就是顺序不对，它是先引入的js脚本，再加载的元素。

三、解决方式

loadScripts: ['@/assets/imgs/warning/js/init.js','@/assets/imgs/warning/js/popper.min.js','@/assets/imgs/warning/js/moment.min.js','@/assets/imgs/warning/js/daterangepicker.js','@/assets/imgs/warning/js/bootstrap.js'],

methods: {
    //加载JS文件
    loadExternalScript() {
      this.loadScripts.forEach(function (script) {
        const scriptElement = document.createElement('script');
        scriptElement.src = script;
        scriptElement.onload = () => {
          // 脚本加载完成后的回调
          console.log('脚本加载完成后的回调');
        };
        document.head.appendChild(scriptElement);
      });
    },
},
mounted() {
  this.loadExternalScript();
}