“node_modules/vue/dist/vue.runtime.esm-bundler.js”中没有与导入“default”匹配的导出

Question

我尝试启动一个全新的 Vue 项目，并想向其中添加 Bootstrap。

\n

一切都很好，但是当我尝试启动它时，出现以下错误：

\n

node_modules/bootstrap-vue/esm/vue.js:13:7: ERROR: No matching export in node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"

\n

我从npm init vue@latest\n开始，之后我做了一个npm install。\n要安装我制作的bootstrap npm install bootstrap bootstrap-vue。\n如果此时我进行了npm run，一切都很好，但是当我尝试在我的项目中导入bootstrap时，我收到错误。这是我的使用方法：

\n

import { createApp } from 'vue'\nimport { createPinia } from 'pinia'\nimport { BootstrapVue } from 'bootstrap-vue'\n\nimport App from './App.vue'\nimport router from './router'\n\nimport './assets/main.css'\n\nconst app = createApp(App)\n\nVue.use(BootstrapVue)\n\napp.use(createPinia())\napp.use(router)\n\napp.mount('#app')\n

\n

这是错误的踪迹：

\n

 npm run dev\n\n> test@0.0.0 dev C:\\Users\\ycolin\\projet\\test\n> vite\n\n\n  VITE v4.0.4  ready in 2204 ms\n\n  \xe2\x9e\x9c  Local:   http://127.0.0.1:5173/\n  \xe2\x9e\x9c  Network: use --host to expose\n  \xe2\x9e\x9c  press h to show help\nX [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"\n\n    node_modules/bootstrap-vue/esm/vue.js:13:7:\n      13 \xe2\x94\x82 import Vue from 'vue';\n         \xe2\x95\xb5        ~~~\n\nX [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"\n\n    node_modules/bootstrap-vue/esm/vue.js:13:7:\n      13 \xe2\x94\x82 import Vue from 'vue';\n         \xe2\x95\xb5        ~~~\n\nX [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"\n\n    node_modules/bootstrap-vue/esm/vue.js:13:7:\n      13 \xe2\x94\x82 import Vue from 'vue';\n         \xe2\x95\xb5        ~~~\n\nX [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"\n\n    node_modules/bootstrap-vue/esm/vue.js:13:7:\n      13 \xe2\x94\x82 import Vue from 'vue';\n         \xe2\x95\xb5        ~~~\n\nX [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"\n\n    node_modules/bootstrap-vue/esm/vue.js:13:7:\n      13 \xe2\x94\x82 import Vue from 'vue';\n         \xe2\x95\xb5        ~~~\n\nX [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"\n\n    node_modules/bootstrap-vue/esm/vue.js:13:7:\n      13 \xe2\x94\x82 import Vue from 'vue';\n         \xe2\x95\xb5        ~~~\n\nX [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"\n\n    node_modules/portal-vue/dist/portal-vue.esm.js:13:7:\n      13 \xe2\x94\x82 import Vue from 'vue';\n         \xe2\x95\xb5        ~~~\n\n(node:28520) UnhandledPromiseRejectionWarning: Error: Build failed with 7 errors:\nnode_modules/bootstrap-vue/esm/vue.js:13:7: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"\nnode_modules/bootstrap-vue/esm/vue.js:13:7: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"\nnode_modules/bootstrap-vue/esm/vue.js:13:7: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"\nnode_modules/bootstrap-vue/esm/vue.js:13:7: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"\nnode_modules/bootstrap-vue/esm/vue.js:13:7: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"\n...\n    at failureErrorWithLog (C:\\Users\\ycolin\\projet\\test\\node_modules\\esbuild\\lib\\main.js:1604:15)\n    at C:\\Users\\ycolin\\projet\\test\\node_modules\\esbuild\\lib\\main.js:1056:28\n    at runOnEndCallbacks (C:\\Users\\ycolin\\projet\\test\\node_modules\\esbuild\\lib\\main.js:1476:61)\n    at buildResponseToResult (C:\\Users\\ycolin\\projet\\test\\node_modules\\esbuild\\lib\\main.js:1054:7)\n    at C:\\Users\\ycolin\\projet\\test\\node_modules\\esbuild\\lib\\main.js:1166:14\n    at responseCallbacks.<computed> (C:\\Users\\ycolin\\projet\\test\\node_modules\\esbuild\\lib\\main.js:701:9)\n    at handleIncomingPacket (C:\\Users\\ycolin\\projet\\test\\node_modules\\esbuild\\lib\\main.js:756:9)\n    at Socket.readFromStdout (C:\\Users\\ycolin\\projet\\test\\node_modules\\esbuild\\lib\\main.js:677:7)\n    at Socket.emit (events.js:400:28)\n    at addChunk (internal/streams/readable.js:293:12)\n(Use `node --trace-warnings ...` to show where the warning was created)\n(node:28520) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)\n(node:28520) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.\n

\n

Answer 1

BootstrapVue 与 Vue 2.6 兼容。

“BootstrapVue 拥有超过 85 个组件、超过 45 个可用插件、多个指令和 1000 多个图标，提供了可用于 Vue.js v2.6 的 Bootstrap v4.5 组件和网格系统最全面的实现之一，并具有广泛的功能以及自动化的 WAI-ARIA 可访问性标记。” 来源

您正在使用 Vue 3。此外，它仍然停留在 Bootstrap 4 中，并且可能与 Vite 不兼容（这很可能是这种情况，因为它喜欢与许多库不兼容）。请改用 bootstrap npm 包。

( npm i bootstrap)