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();
}