Vue app.js 与主页上的其他 JavaScript 文件冲突（Laravel）

Posted 2023-02-16

【中文标题】Vue app.js 与主页上的其他 JavaScript 文件冲突（Laravel）

【英文标题】：Vue app.js colliding with other JavaScript files on homepage (Laravel)

【发布时间】：2020-09-30 02:01:57

【问题描述】：

我在现有项目中包含了 Vuejs，但现在它影响了我原来的主题 javascript 文件。 我的主页上没有 app.js，一切正常。但是当我包含它时，我的原始主题 js 文件上的所有 UI 效果和功能，包括滑块、画布、轮播和下拉菜单都停止工作。

如何阻止 Vue 与我的主题 js 发生冲突并导致其崩溃

【问题讨论】：

您是否为您的 Vue 组件使用范围样式？或者 Vue 组件是否使用了可能影响其他类名和/或全局样式的类名和/或全局样式？

不，我没有添加任何其他类名和样式。这是一个原创的工作主题。当我包含

时它就会中断

【参考方案1】：

关于 CSS 冲突...

您可以通过确保所有 css 都得到范围来解决。

而不是

<style>
/* global styles */
</style>

使用

<style scoped>
/* local styles */
</style>

Vue 将编译你的 css 以生成类似于 h1[data-v-f3f3eg9] 的内容，这将防止页面上的其他元素被你的 vue 代码格式化。但是，除非您向组件添加 css 重置，否则它不会阻止您的页面代码影响 vue 组件。

关于JS代码...

如果不看到碰撞是什么就很难判断。 AFAIK 这没有什么神奇的设置。

【讨论】：

我不知道这是否有帮助，但 JS 文件实际上是另一个编译包，就像 Vue app.js 一样

不知道是在哪个框架上写的，可能是 react 还是别的什么

应该能够从包含的依赖中判断，是从CDN加载react吗？

是的，既然你提到了它。这是

【参考方案2】：

我找到了这个碰撞的解决方案

将您的app.js 放在脚本链接的顶部，例如：

<script src=" asset('js/app.js') "></script>

然后

<script> $.noConflict(); /script>

然后放入你的其他 JavaScript 就可以正常工作了。

【讨论】：

同时提及why。解释你建议的答案。