Vue引入js脚本问题记录(附解决办法)

目录

一、需求

二、import引入问题记录

三、解决方式


一、需求

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

二、import引入问题记录

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

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

三、解决方式

javascript 复制代码
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'],
javascript 复制代码
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();
}
相关推荐
吃饺子不吃馅22 分钟前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学
theOtherSky28 分钟前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节
Baklib梅梅37 分钟前
无头内容管理系统:打造灵活高效的多渠道内容架构
前端·ruby on rails·前端框架·ruby
会联营的陆逊1 小时前
JavaScript 如何优雅的实现一个时间处理插件
javascript
over6971 小时前
浏览器里的AI魔法:用JavaScript玩转自然语言处理
前端·javascript
Amy_cx1 小时前
搭建React Native开发环境
javascript·react native·react.js
代码AI弗森1 小时前
Python × NumPy」 vs 「JavaScript × TensorFlow.js」生态全景图
javascript·python·numpy
疏狂难除1 小时前
关于spiderdemo第二题的奇思妙想
javascript·爬虫
渣渣盟2 小时前
探索Word2Vec:从文本向量化到中文语料处理
前端·javascript·python·文本向量化
Pu_Nine_92 小时前
Vue 3 + TypeScript 项目性能优化全链路实战:从 2.1MB 到 130KB 的蜕变
前端·vue.js·性能优化·typescript·1024程序员节