在Vue 3中导入Bootstrap触发net::ERR_ABORTED 504网关超时错误求助

• 调整导入语句位置：将所有import移至文件顶部，Vite对模块解析的逻辑更适配顶部导入，避免实例挂载后再导入引发的加载阻塞。修改后的main.js示例：

  import { createApp } from 'vue'
  import App from './App.vue';
  import './assets/main.css';
  import "bootstrap/dist/js/bootstrap.js"
  
  createApp(App).mount('#app');
  

• 切换为Bootstrap ES模块导入：直接导入UMD格式的编译文件可能触发Vite模块解析超时，改用ES模块方式导入：

  import * as bootstrap from 'bootstrap'
  

  这种方式让Vite更高效处理依赖链，降低超时概率。

• 清除Vite缓存：删除项目根目录下的node_modules/.vite文件夹，再重启开发服务：

  rm -rf node_modules/.vite
  npm run dev
  

  缓存损坏可能导致模块加载时出现异常请求超时。

• 重新安装依赖：确保Bootstrap和Popper.js的文件完整无损坏，执行以下命令：

  rm -rf node_modules package-lock.json
  npm install
  

• 检查Vite自定义配置：如果项目有vite.config.js，排查是否存在代理、路径别名等配置干扰了Bootstrap模块的正常解析。

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