Vue3+Vite引入jQuery/Bootstrap/Popper后运行及构建报错求助

问题根源 #

直接在index.html全局引入这类依赖时，容易触发以下问题：

• 依赖加载顺序错误，导致Bootstrap无法找到jQuery/Popper
• Vite的模块编译机制会将未被模块系统引用的全局变量标记为未定义
• 打包时tree-shaking会误移除未被显式引用的全局资源

下面提供两种可行的解决方式：

方案一：通过npm安装并模块化引入（推荐） #

这种方式更符合Vite的生态，避免全局变量冲突，打包也更可控。

1. 安装对应依赖

# Bootstrap 5 依赖@popperjs/core，若用Bootstrap 4则安装popper.js
npm install jquery bootstrap @popperjs/core

2. 在src/main.js中导入并配置全局变量

import { createApp } from 'vue'
import App from './App.vue'

// 导入Bootstrap样式
import 'bootstrap/dist/css/bootstrap.min.css'

// 导入依赖并挂载到window，确保Bootstrap能访问到
import $ from 'jquery'
import Popper from '@popperjs/core'
import 'bootstrap/dist/js/bootstrap.min.js'

window.$ = $
window.jQuery = $
window.Popper = Popper

createApp(App).mount('#app')

方案二：保留index.html全局引入，配合Vite配置调整 #

如果必须用CDN或本地文件全局引入，需按以下步骤调整：

1. 严格调整index.html中的引入顺序
   必须遵循「jQuery → Popper → Bootstrap JS」的顺序，且CSS放在<head>，JS放在<body>末尾（main.js之前）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <link rel="icon" type="image/svg+xml" href="/vite.svg">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite + Vue</title>
  <!-- 先引入Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div id="app"></div>
  <!-- 按顺序引入JS依赖 -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
  <!-- 最后引入项目入口 -->
  <script type="module" src="/src/main.js"></script>
</body>
</html>

2. 在vite.config.js中声明全局变量
   告诉Vite这些变量是全局存在的，避免编译时抛出「未定义」错误：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  // 声明全局变量，匹配index.html中引入的全局对象
  define: {
    $: 'jQuery',
    jQuery: 'jQuery',
    Popper: 'Popper'
  }
})

额外提示 #

• Bootstrap 5 已支持不依赖jQuery运行，若项目不需要jQuery，可只引入Bootstrap的原生JS，减少依赖体积
• 若使用本地资源而非CDN，需确保文件路径正确，可将静态资源放在public目录下，引入时用/文件名路径

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