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