如何使用 npm 在 vue.js 中包含 bootstrap-vue？

Posted 2023-02-22

【中文标题】如何使用 npm 在 vue.js 中包含 bootstrap-vue？

【英文标题】：How to include bootstrap-vue in vue.js with npm?

【发布时间】：2019-07-11 02:47:55

【问题描述】：

我正在使用 vue.js、webpack、npm 和 jQuery。现在我想在我的项目中包含框架 bootstrap-vue。我通过 npm 遵循了https://bootstrap-vue.js.org/docs 的指南，并包含了 bootstrap-vue。在启动 npm 的构建过程时，我遇到了太多的 babel-runtime 错误，例如：

ERROR in ./node_modules/bootstrap-vue/es/utils/popover.class.js
Module not found: Error: Can't resolve '@babel/runtime/helpers/typeof' in 
'C:\Users\abdul\WebstormProjects\editor\node_modules\
bootstrap-vue\es\utils'
@ ./node_modules/bootstrap-vue/es/utils/popover.class.js 10:38-78
@ ./node_modules/bootstrap-vue/es/directives/popover/popover.js
@ ./node_modules/bootstrap-vue/es/directives/popover/index.js
@ ./node_modules/bootstrap-vue/es/directives/index.js
@ ./node_modules/bootstrap-vue/es/index.js
@ ./src/main.js

main.js:

import Vue from 'vue'
import App from './App'
import router from './router'
import 'jquery'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue(
el: '#app',
router,
template: '<App/>',
components:  App 
)

对于其他 javascript 文件，我也有类似的错误。 Popover.class.js 就是其中之一。

除了使用 bootstrap-vue 成功运行构建之外。可选：我可以通过其他方式包含 bootstrap-vue。

【问题讨论】：

嘿bigiza，欢迎堆栈溢出，你能不能试着删除你的node_modules的整个文件夹然后打开一个新的终端然后运行nam install...然后告诉我事情如何去了:)

@Ahm。 npm WARN rollback 回滚 readable-stream@2.3.6 失败（这可能是无害的）：EPERM: operation not allowed, lstat 'C:\Users\abdul\WebstormProjects\editor\node_modules\fsevents\node_modules' npm WARN optional SKIPPING OPTIONAL依赖：fsevents@1.2.7 (node_modules\fsevents)：npm WARN notsup 跳过可选依赖：fsevents@1.2.7 不受支持的平台：想要 "os":"darwin","arch":"any"（当前: "os":"win32","arch":"x64") npm run build: 和以前一样的错误。

我认为问题是你nam install时没有下载一些包或者babel使用的路径有问题

你能不能尝试在你的根文件夹中创建一个vue.config.js 文件并将其添加到const path = require('path') module.exports = configureWebpack: resolve: alias: 'bootstrap-components': path.resolve(__dirname, 'node_modules/bootstrap-vue/es/components') 中

如果你能把babel.config.js的内容添加到帖子中我认为这会有所帮助

【参考方案1】：

创建项目然后运行这个命令：

npm i bootstrap-vue

【参考方案2】：

安装 vue-cli 3 并将 bootstrap-vue 添加为插件

运行这些命令：

npm install -g @vue/cli

vue create project-name

cd project-name

vue add bootstrap-vue

插件将自动添加和配置。