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();
}
相关推荐
慧一居士6 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead8 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js