Vue.js export default失效，Bootstrap-Vue表单示例无法运行求助

看起来你是在纯HTML文件里用CDN方式引入Bootstrap-Vue，而不是使用Vue CLI这类项目模板，这时候export default是没法直接用的——那是Vue单文件组件（.vue文件）的语法，在普通HTML里得用Vue的全局实例写法。另外，脚本引入顺序错误也会导致Bootstrap-Vue组件无法正常注册。

常见问题点及修复方案 #

1. 修正脚本引入顺序 #

必须按Vue → Bootstrap-Vue的顺序引入脚本，不然Bootstrap-Vue无法挂载到Vue实例上：

<!-- 先引入Vue -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- 再引入Bootstrap-Vue -->
<script src="https://unpkg.com/bootstrap-vue@2/dist/bootstrap-vue.js"></script>

2. 替换export default为Vue全局实例 #

在HTML里，你需要通过new Vue()来创建应用实例，而不是用export default。下面是一个完整的可运行示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap-Vue Form Example</title>
  <!-- 引入Bootstrap和Bootstrap-Vue样式 -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2/dist/bootstrap-vue.css"/>
</head>
<body>
  <!-- Vue挂载的容器 -->
  <div id="app">
    <b-form @submit="onSubmit">
      <b-form-group label="用户名" label-for="username">
        <b-form-input id="username" v-model="form.username" required></b-form-input>
      </b-form-group>
      <b-form-group label="密码" label-for="password">
        <b-form-input type="password" id="password" v-model="form.password" required></b-form-input>
      </b-form-group>
      <b-button type="submit" variant="primary">提交</b-button>
    </b-form>
    <p class="mt-3">表单数据: {{ form }}</p>
  </div>

  <!-- 脚本引入顺序不能错 -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@2/dist/bootstrap-vue.js"></script>
  <script>
    // 这里用new Vue创建实例，代替export default
    new Vue({
      el: '#app', // 指定挂载到页面上的容器
      data() {
        return {
          form: {
            username: '',
            password: ''
          }
        }
      },
      methods: {
        onSubmit(evt) {
          evt.preventDefault();
          alert('表单提交! 用户名: ' + this.form.username);
        }
      }
    })
  </script>
</body>
</html>

3. 关键注意事项 #

• 所有Bootstrap-Vue组件必须放在Vue实例挂载的容器（比如上面的#app）内部，不然Vue无法识别这些组件。
• 如果你用的是Vue 3，注意Bootstrap-Vue 2只支持Vue 2；如果要搭配Vue 3，需要用对应适配Vue 3的Bootstrap Vue衍生库（你参考的官方文档是Bootstrap-Vue，所以建议优先用Vue 2对应版本）。
• 确保所有CDN链接是完整有效的，不要像你代码里那样出现截断（比如https://unpkg.c...）。

如果还有问题，可以检查浏览器控制台的报错信息，通常能直接定位到是组件未注册、脚本未加载还是语法错误。

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