Vue ES 模块和浏览器冲突答案

【问题标题】：Vue ES Module and Browser ConflcitsVue ES 模块和浏览器冲突
【发布时间】：2021-04-19 19:44:55
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript vue.js webpack vuejs2 es6-modules

【解决方案1】：

正如另一个答案所指出的那样，将您的应用程序作为 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>

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

【讨论】：

【解决方案2】：

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

您可以尝试通过 iframe 或使用 Web 组件注入您的应用

【讨论】：

【解决方案3】：

您可以尝试下载您正在处理的网站的浏览器版本的 vue js。尝试将下载的文件插入你的项目而不是你的捆绑版本

或

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

您可以对每个依赖项执行此操作，直到您找到可接受的折衷方案，以防您成功重现和修复错误。

【讨论】：