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

Question

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

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

Answer 1

关于 CSS 碰撞...

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

代替

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

利用

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

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

如果不看到碰撞是什么就很难说清楚。 AFAIK 没有什么神奇的设置。

Answer 2

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

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

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

然后

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

之后放上你的其他 JavaScript 它会正常工作。