首页 > 解决方案 > Bootstrap-vue 连接到 vue.js 但它不起作用

问题描述

在此处输入图像描述

未捕获的类型错误:无法在模块../node_modules/bootstrap-vue/esm/utils/config.js (chunk-vendors.js:6778) 的 eval (config.js?228e:6) 处读取未定义的属性“原型” webpack_require (app.js:849) at fn (app.js:151) at eval (props.js?cf75:1) at Module../node_modules/bootstrap-vue/esm/utils/props.js (chunk-vendors .js:7054) 在webpack_require (app.js:849) 在 fn (app.js:151) 在 eval (model.js?58f2:1) 在 Module../node_modules/bootstrap-vue/esm/utils/model .js (块-vendors.js:6970)

我认为它与 npm 控制台连接:

./src/plugins/bootstrap-vue.js 中的警告

“在‘​​vue’中找不到导出‘默认’(导入为‘Vue’)

./node_modules/bootstrap-vue/esm/vue.js 中的警告

“在‘​​vue’中找不到导出‘默认’(重新导出为‘Vue’)

标签: javascriptvue.jsconsoleconsole.logbootstrap-vue

解决方案


您可以通过以下方式在Vue CLI中安装BootstrapVue

  • npm i bootstrap-vue项目的root.
  • 将其导入您的main.js文件中,如下所示:
import Vue from 'vue'
import App from './App.vue'

import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

new Vue({
  render: h => h(App),
}).$mount('#app')

您现在应该可以导入和使用BootstrapVue's 的组件了。


推荐阅读