Vue ES模块和浏览器冲突

Question

我有一个Vue.js项目正在一个网站上运行，我无法控制页面上加载的其他内容。

每当页面上有其他东西正在加载浏览器Vue.js库时，我的库似乎会在控制台中抛出错误，直接指向浏览器版本的Vue.js

我的猜测是，这与该脚本设置的全局window.Vue有关，但我的代码是使用Webpack生成的，即使我没有将Vue分块到一个单独的文件中，我仍然存在这些问题。

有什么人可以建议尝试和调试这个吗？或者以某种方式强制我的应用程序仅使用捆绑的Vue.js ES模块版本？

Answer 1

您可能会尝试下载您正在工作的网站的浏览器版本vue-js。尝试将下载的文件插入您的项目中，而不是您的捆绑版本

或

只需查看使用过的vue的浏览器版本，并尝试使用相同的vue版本(在package.json中(运行您的应用程序，那么这可能会在您的公共环境中产生错误。

你可以对每个依赖项都这样做，直到你找到一个可以接受的折衷方案，以防你成功地复制和修复错误。

Answer 2

这是因为浏览器正在同一javascript上下文中加载另一个版本/实例的vuejs。

你可以尝试的是，通过iframe或使用web组件注入你的应用程序

Answer 3

正如另一个答案所指出的，将应用程序作为iframe/web组件注入可能是一个很好的起点。下面是一个简单的沙箱示例，它为您演示了这一点——https://codepen.io/ajobi/project/editor/AKyVLd

有两个"；应用程序"；加载在相同的上下文中，正如您将在示例中看到的那样，vue脚本相互覆盖。通过iframe注入的第三个应用程序不再发生这种情况。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<div id="appOne">
<h2>Vue version (app one): {{ Vue.version }}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<div id="appTwo">
<h2>Vue version (app two): {{ Vue.version }}</h2>
</div>

我认为您的捆绑代码不应该与外部页面冲突，但如果没有一些最小的可复制示例，很难说为什么(或是否(会发生这种情况。