如何修复“检测到多个 Vue 实例！”使用 parcel.js 和 bootstrap-vue答案

【问题标题】：How to fix "Multiple instances of Vue detected!" with parcel.js and bootstrap-vue如何修复“检测到多个 Vue 实例！”使用 parcel.js 和 bootstrap-vue
【发布时间】：2025-12-03 04:15:01
【问题描述】：

请问multiple instances of vue detected!这个警告怎么解决？

我的 index.html 文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style/cssreset.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap-reboot.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css"> 
    <link rel="stylesheet" href="../node_modules/bootstrap-vue/dist/bootstrap-vue.css">
    <link rel="stylesheet" href="style/main.css">
</head>

<body>  
    <div class='app' id='app'>
    </div>
    <script src="code/app.js"></script>
</body>
</html>

我的 app.js 文件：

import Vue from '../../node_modules/vue/dist/vue.common'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

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

const app = new Vue
({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
})

我的 package.json 文件有这个（这似乎没有什么区别）：

  "alias": {
    "vue" : "./node_modules/vue/dist/vue.common.js"
  },

【问题讨论】：

为什么需要 '../../node_modules/vue/dist/vue.common' ？别名假定使用了 vue 导入，仍然取决于设置，但不应以任何方式影响相对导入。
起初我只有import Vue from 'vue'，但这给了我这个错误：[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
应该是受到alias这种方式的影响。是吗？
对不起，我不明白你的意思。它是什么”？受别名影响如何？看起来没有使用别名，因为我可以将我在别名中为 vue 提供的值更改为乱码，一切仍然正常。
vue 别名应该会影响 vue 导入的工作方式。当您像import Vue from 'vue' 而不是import Vue from '../../node_modules/vue/dist/vue.common' 那样导入它时，我希望它能够执行您想要的操作。如果在您使用带有 import Vue from 'vue' 的乱码别名时构建正常，那么您在配置中的某处有问题，请提供一种重现问题的方法，它可能特定于您的 Parcel 设置。

标签： vue.js bootstrap-vue parceljs

【解决方案1】：

package.json 中的别名字段需要更改为"vue": "/../node_modules/vue/dist/vue.common.js"。如果编译时您的别名字段错误，Parcel 不会抱怨，因此您必须非常小心自己指定正确的路径，具体取决于您的构建命令的根文件夹。

【讨论】：

【解决方案2】：

我找到了两个解决方案（也许这会为某人节省时间）。

1：在 webpack 配置文件中添加这一行：

let whiteListedModules = ['vue', 'bootstrap-vue']

2：将导入行改为：

Vue.use(require('bootstrap-vue/dist/bootstrap-vue.common.min'));

source

【讨论】：