Vue.js HelloWorld在Bootstrap站点中嵌套元素时无法正常运行

我之前也碰到过类似的坑！咱们来一步步排查解决你的问题：

首先确认Vue的挂载方式和时机是否正确 #

这是最常见的原因——如果你的Vue代码在DOM元素加载完成前就执行了，或者用错了Vue版本的写法，就会出现“单独运行正常，嵌套就失效”的情况。

情况1：使用Vue 2 #

确保脚本放在DOM元素之后，或者用DOMContentLoaded监听DOM加载完成：

<div class="container">
  <div id="app">{{ message }}</div>
</div>

<script src="https://unpkg.com/vue@2"></script>
<script>
// 等DOM加载完再初始化Vue
document.addEventListener('DOMContentLoaded', function() {
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
})
</script>

情况2：使用Vue 3 #

Vue 3不再支持new Vue()的写法，必须用createApp，同样要保证DOM就绪：

<div class="container">
  <div id="app">{{ message }}</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  })
  app.mount('#app')
})
</script>

检查Bootstrap与Vue的冲突 #

如果你引入了Bootstrap的JS依赖（比如Bootstrap 5的bundle或者旧版的jQuery），要注意初始化顺序：

• 把Vue的初始化代码放在Bootstrap JS之后，避免Bootstrap的DOM操作干扰Vue的挂载。
• 不要让jQuery等库修改Vue挂载的#app元素，比如不要用jQuery给#app加动态内容，会破坏Vue的响应式。

排查样式或DOM结构问题 #

有时候不是Vue没运行，而是你看不到结果：

• 打开浏览器开发者工具，检查#app元素的计算样式，看有没有display: none、visibility: hidden或者opacity: 0这类隐藏属性。
• 确保页面里只有一个id="app"的元素，Vue只会挂载第一个匹配的元素，重复id会导致异常。

完整可运行示例 #

这里给你一个嵌套在Bootstrap Container里的Vue 3完整示例，直接复制就能运行：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue + Bootstrap Container</title>
  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <div id="app" class="alert alert-primary">
      {{ message }}
    </div>
  </div>

  <!-- 引入Vue 3 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <!-- 引入Bootstrap JS（如果需要弹窗、下拉等交互组件） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const app = Vue.createApp({
        data() {
          return {
            message: 'Hello Vue! 我在Bootstrap Container里正常工作啦🥳'
          }
        }
      })
      app.mount('#app')
    })
  </script>
</body>
</html>

按照上面的步骤排查，应该就能解决你的问题啦！

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