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

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

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

发现问题:

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

如下图所示:

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

图片[1]-在WordPress下Vue与JQuery冲突的解决方案-倦意博客

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

图片[2]-在WordPress下Vue与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= 即可解决问题!

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容