将 Bootstrap 与 VueJS 一起使用时未捕获的 TypeError

Posted 2023-03-16

【中文标题】将 Bootstrap 与 VueJS 一起使用时未捕获的 TypeError

【英文标题】：Uncaught TypeError when using Bootstrap with VueJS

【发布时间】：2021-01-20 21:37:26

【问题描述】：

我正在尝试将引导程序与我的 vue 项目集成，但是当我打开浏览器时，我的控制台出现以下错误。

config.js?228e:8 Uncaught TypeError: Cannot read property 'prototype' of undefined
    at eval (config.js?228e:8)
    at Module../node_modules/bootstrap-vue/esm/utils/config.js (chunk-vendors.js:3262)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (alert.js?5fda:1)
    at Module../node_modules/bootstrap-vue/esm/components/alert/alert.js (chunk-vendors.js:94)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (index.js?cca8:1)
    at Module../node_modules/bootstrap-vue/esm/components/alert/index.js (chunk-vendors.js:106)

我跑了$ vue add bootstrap-vue，它创建了bootstrap-vue.js

import Vue from 'vue'

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

Vue 版本：3

引导版本：4

有关如何修复此错误或在 vue 上安装引导程序的任何建议？ 谢谢

【参考方案1】：

根据Github issue 和他们的Vue-Bootstrap documentation，目前无法将 Vue3.x 与 Bootstrap 一起使用，因为存在一些重大的重大变化。

This is mentioned 在问题中：

请注意，Vue 2.x 和 Vue 之间有很多重大变化 3.x，这需要在 BootstrapVue 中进行更改。

Vue.extend 被广泛使用，但在 Vue 3.x 中不可用。 （替换为 Vue 3.x 导出的 createComponent() 方法）

你也许可以先导入 Vue 和 createComponent，然后 设置 Vue.export = createComponent，然后导入第 3 方 库（如 PortalVue、BootstrapVue 等）。