构建Vue应用时如何复用站点现有Bootstrap和jQuery无需打包进项目

你遇到的构建报错是编译期静态变量检测未通过，运行时宿主站点已经全局挂载了$（jQuery）和Bootstrap的原型方法，只要解决编译期的变量声明问题即可正常构建，无需在项目依赖中额外引入Bootstrap、jQuery包，也不需要使用Bootstrap-Vue。

通用方案（适配所有构建工具） #

无需修改构建配置，直接解决静态校验报错即可：

• 若项目开启了ESLint校验，在根目录的.eslintrc.js（或对应ESLint配置文件）中添加全局变量声明：

module.exports = {
  // 保留原有其他配置
  globals: {
    $: 'readonly',
    jQuery: 'readonly'
  }
}

• 若项目使用TypeScript，在src目录下新建global.d.ts文件，写入以下内容：

// 不想安装jquery类型包可以直接替换为 declare var $: any;
declare var $: typeof import('jquery');
declare var jQuery: typeof import('jquery');

export {}

Vue CLI（Webpack）项目专属配置 #

可以在vue.config.js中添加externals配置，明确告诉Webpack jQuery为外部全局依赖，不需要打包：

module.exports = {
  configureWebpack: {
    externals: {
      jquery: 'window.$'
    }
  }
}

Vite项目专属配置 #

在vite.config.js中添加全局变量替换规则，编译时自动将$替换为全局挂载的对象：

import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    '$': 'window.$',
    'jQuery': 'window.jQuery'
  }
})

注意事项 #

• 不要在组件挂载前调用Bootstrap相关方法，必须在mounted（Options API）或onMounted（Composition API）生命周期中执行DOM操作，避免选择器找不到对应元素。
• 临时调试可以直接写window.$(".modal").modal("show")，无需任何配置也可通过编译。

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