vue.js - 如何使用parcel.js和bootstrap-vue修复 "Multiple instances of Vue detected!"

标签 vue.js bootstrap-vue parceljs

如何解决警告检测到多个vue实例!

我的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"
  },

最佳答案

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

关于vue.js - 如何使用parcel.js和bootstrap-vue修复 "Multiple instances of Vue detected!",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61442740/

相关文章:

javascript - nuxtjs中如何控制路由渲染

vue.js - 将 Bootstrap 4 与 NuxtJS 一起使用

vue.js - 在 BootstrapVue 中关闭 Modal 时防止关闭 Toast

css - Vuejs 从顶部导航栏中删除滚动条

javascript - 为什么我得到一个 "df.worker.min.js” 已加载,即使它的 MIME 类型 (“text/html” 不是有效的 JavaScript MIME 类型”

javascript - Vue.js 从模板中分离样式

javascript - Laravel Controller 将值作为 Vue prop 传递

vue.js - 将数据传递给商店?

css - 使用 Parcel 从 node_modules 导入 CSS

javascript - ParcelJs 在所有文件链接之前添加额外的 "/"