Vue.js 3中Cannot set properties of undefined (setting 'bootstrap')错误修复

1. 依赖顺序错误：Bootstrap 4 要求先加载 jQuery 和 Popper.js，再加载自身 JS 文件，但你的导入顺序是 jQuery → Bootstrap → Popper，导致 Bootstrap 初始化时找不到 Popper 全局对象；同时 Vue 的 import 不会自动将 jQuery 挂载到 window 全局环境，Bootstrap 无法找到全局的 $/jQuery，从而抛出 Cannot set properties of undefined (setting 'bootstrap') 错误。
2. 全局对象缺失：slimscroll、owl.carousel 这类老插件依赖全局的 jQuery 对象，Vue 模块导入的 jQuery 仅存在于模块作用域，未暴露到 window，所以即使文件加载成功，插件也无法正常初始化。

步骤1：调整导入顺序并挂载全局对象 #

修改 <script> 中的导入代码，确保依赖顺序正确，并将 jQuery、Popper 挂载到 window：

// 先导入Popper并挂载到全局
import Popper from "./assets/js/popper.min.js";
window.Popper = Popper;

// 导入jQuery并挂载到全局
import $ from "./assets/js/vendor/jquery-2.2.4.min.js";
window.$ = window.jQuery = $;

// 再导入Bootstrap
import "./assets/js/bootstrap.min.js";

// 后续导入依赖jQuery的插件
import "./assets/js/owl.carousel.min.js";
import "./assets/js/metisMenu.min.js";
import "./assets/js/jquery.slimscroll.min.js";
import "./assets/js/jquery.slicknav.min.js";

// CDN资源建议改用npm安装，若坚持使用需确保加载时机正确
import "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js";
import "https://code.highcharts.com/highcharts.js";

// 最后导入自定义脚本（依赖上述库）
import "./assets/js/line-chart.js";
import "./assets/js/pie-chart.js";
import "./assets/js/plugins.js";
import "./assets/js/scripts.js";

import { RouterView } from 'vue-router'

步骤2：优化CDN资源导入（可选但推荐） #

直接导入CDN链接在Vue模块系统中可能存在加载时序问题，建议通过npm安装对应包：

• Chart.js：执行 npm install chart.js@2.7.2，然后用 import Chart from 'chart.js' 导入
• Highcharts：执行 npm install highcharts，然后用 import Highcharts from 'highcharts' 导入

步骤3：验证插件初始化 #

若scripts.js或plugins.js中有直接依赖全局对象的初始化代码，确保它们在所有依赖库导入后执行，避免因提前执行导致找不到全局对象的问题。

内容的提问来源于stack exchange，提问作者pankaj