如何让Vue项目仅在开发环境引入Bootstrap，生产环境不重复加载？

问题背景 #

现有PHP项目使用定制版无jQuery的Bootstrap 5.2（通过Git流水线从SASS构建），需集成Vue应用：

• 单独运行Vue（npm run dev）时必须引入Bootstrap才能正常显示样式和交互
• 和PHP一同运行时，引入官方Bootstrap会与已加载的定制版冲突，导致运行失败

正确实现方案 #

1. 基于环境变量控制Bootstrap引入 #

在main.js中通过Vite的环境变量判断环境，仅在开发环境引入Bootstrap，生产打包时自动跳过：

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

// 仅开发环境加载Bootstrap，用于单独调试Vue
if (import.meta.env.DEV) {
  import 'bootstrap/dist/css/bootstrap.min.css'
  import 'bootstrap/dist/js/bootstrap.bundle.min.js'
}

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

• 开发模式（npm run dev）：正常加载Bootstrap，保证单独调试时的样式和交互
• 生产打包（npm run build）：不会将Bootstrap代码打包进产物，避免和PHP侧的定制版冲突

2. 修复生产环境Bootstrap事件注册错误 #

集成到PHP后出现的TypeError: el2.addEventListener is not a function，是因为Bootstrap在页面初始化时已完成全局绑定，但Vue动态渲染的新元素未被初始化。需手动在Vue组件挂载后初始化对应Bootstrap组件：

方案A：组件内局部初始化

针对单个组件需要的Bootstrap功能，在mounted钩子中初始化：

// 示例Vue组件（如Dropdown.vue）
<template>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
      下拉菜单
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">选项1</a></li>
      <li><a class="dropdown-item" href="#">选项2</a></li>
    </ul>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // 初始化当前组件内的下拉菜单
  const dropdownEl = document.querySelector('.dropdown-toggle')
  if (dropdownEl) {
    new bootstrap.Dropdown(dropdownEl)
  }
})
</script>

方案B：全局批量初始化

如果项目中Bootstrap组件较多，可在Vue根实例挂载后，全局初始化所有需要的组件：

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

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

// 生产环境下，手动初始化Bootstrap组件
if (!import.meta.env.DEV) {
  // 等待Vue渲染完成后执行
  setTimeout(() => {
    // 初始化模态框
    document.querySelectorAll('[data-bs-toggle="modal"]').forEach(el => new bootstrap.Modal(el))
    // 初始化下拉菜单
    document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(el => new bootstrap.Dropdown(el))
    // 根据需求添加其他组件（如弹出框、标签页等）
  }, 0)
}

3. 简化Vite配置（可选） #

之前的external配置可简化，依赖环境变量的判断已足够避免Bootstrap被打包：

// vite.config.js
export default defineConfig({
  css: {
    devSourcemap: true,
  },
  plugins: [vue()],
  build: {
    minify: false,
    rollupOptions: {
      external: ['bootstrap'], // 仅标记bootstrap为外部依赖，无需具体路径
    },
  },
})

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