在WordPress下Vue与JQuery冲突的解决方案

在很长一段时间内，我都被这个问题困扰。

发现问题：

先引用了Vue，再引用了JQuery，则会引起冲突，使JQuery的$选择器失效，从而导致基于JQuery的代码无法正确使用。

如下图所示：

红框内的代码到蓝框之前，都是正常执行没有问题，直到引入了Vue开发的jymusicplayer.js 文件

则黑框所示的所有基于JQuery开发的代码全部失效

错误的原因是 $ is not a function ，也就是JQuery的$ 选择器错误。

试错：

一般人第一反应是将Vue文件放到最下面，也就是JQuery代码全部执行完毕后再执行Vue代码

<script async="" data-tbquirecontext="_" data-tbquiremodule="main" src="https://demo.jyblog.cn/wp-content/themes/zibll/js/main.min.js?ver=7.6"></script>

但是这个main.min.js 比较特殊，他的异步执行的代码（有个异步修饰符 async="" ）

无论如何，他都是在最后执行的。

那有人会说，那么将Vue代码放到最上面，等Vue渲染完毕，再执行JQuery代码咯？

我也试过了，jymusicplayer放到最上面，同样会 $ is not a function 报错，具体原因不得而知。

还有人也会问：

那为什么一定要用JQuery代码？全改成Vue不就行了？

NONONO，我这个插件是基于Vue开发的，但是这个WordPress主题是JQuery开发的，要是全改成Vue，不是相当于我帮作者做了一个Vue版本？那工程量是相当的大？

原因：

通过我不断地试错，我终于找到了出现这个错误的大致原因。

在我的代码里面是没有用到$这个修饰符的，但是Vite却用到了，在Vite打包执行 npm run build 压缩后出现$ 被赋值为其他函数的情况！

如下所示：

$ = (e, n, s, i, r, o, c) => {
        if (s !== i) {
          if (s !== t)
            for (const t in s)
              C(t) || t in i || l(e, t, s[t], null, c, n.children, r, o, J);
          for (const t in i) {
            if (C(t)) continue;
            const a = i[t],
              u = s[t];
            a !== u && "value" !== t && l(e, t, u, a, c, n.children, r, o, J);
          }
          "value" in i && l(e, "value", s.value, i.value, c);
        }
      },

可以看到$ 已经被赋值为其他函数

我们大致找到了原因，正是这段代码，将本来为JQuery 的$修饰符，强行赋值给了Vue的函数，所以导致JQuery查找器失效，出现了 $ is not a function 的报错！

找到原因了就很好解决：

Ctrl + F：批量替换

将$= 替换为 $Vue= 即可解决问题！