（转）VUE中使用 zTree -- jQuery 树插件及使用时报错 jQuery is not defined 的问题解决

xiaoxiao2025-04-04 29

使用需求

时隔两年多，再次使用到了 ztree ，这次是在vue中引入使用，并遇到了一些小问题，在这里把经验和解决办法给大家分享下，共勉。 ztree： zTree -- jQuery 树插件官网简介 zTree v3.5 Demo 演示有关ztree的使用，之前整理过两篇在jquery中使用的方法，大家参考下：zTree -- jQuery 树插件使用方法与例子zTree -- jQuery 树插件构造treeNode JSON 数据对象zTree v3.5 Demo 演示 OutLook 样式的左侧菜单

在vue中使用zTree

首先，需要安装插件：

npm install ztree

然后，使用ztree

具体相关的代码如下：

提示：zTree 的容器 className 别忘了设置为 "ztree"！！！

import 'jquery' import 'ztree' import 'ztree/css/metroStyle/metroStyle.css' data () { return { treeNodes: '', selectNode: '', selectTreeSetting: { view: { showIcon: true, showLine: true, dblClickExpand: false }, async: { enable: true, type: 'get', dataType: 'json', url: '/xxxx/list.json', autoParam: ['id=parentId'], dataFilter: this.filter }, data: { simpleData: { enable: true, idKey: 'id', pIdKey: 'parentId' } }, callback: { onClick: this.zTreeOnClick } } } }, mounted () { this.initStationSelectTree($('#station')) }, methods: { initStationSelectTree (anchor) { this.$get('/xxxxx/list.json', {}, response => { //此处是使用的封装过的 this.treeNodes = $.fn.zTree.init(anchor, this.selectTreeSetting, response.data) }) }, filter (treeId, parentNode, childNodes) { if (!childNodes) return null for (var i = 0, l = childNodes.length; i < l; i++) { if (childNodes[i].parentId === 'super') childNodes[i].open = true } curChildNodes = childNodes return childNodes }, zTreeOnClick: function (event, treeId, treeNode) { // console.log(treeNode);点击树节点获取当前节点 treeNode.name 等，编写需要的逻辑即可 } }

效果如图：

报错jQuery is not defined的解决

注意，在ztree中会使用到jQuery ，可能会报错jQuery is not defined,一开始参考vue ztree 结合使用中的办法：

项目build的时候自动加载jquery，并且输出到jQuery中

new webpack.ProvidePlugin({ jQuery:'jquery', $:'jquery', })

在 npm run dev 之前，先build一下，解决了报错 jQuery is not defined 的问题。

但是，重点来了，本地没问题，打包发布到正式环境依然报错jQuery is not defined，这就奇怪了，于是搜了很多解决报错jQuery is not defined的文章，各种方法试了很多，依然是报错，最后，其中一篇Webpack引入jquery及其插件的几种方法中的第四种方案，终于能成功解决了，本地运行和发布到正式环境都没再报错了。这里贴一下解决方案：

此方法只依赖于自己，完全不需要任何其他插件与加载器，创建jquery的包装对象jquery-vendor.js import $ from 'jquery' window.$ = $ window.jQuery = $ export default $ 以后引用jquery时指向jquery-vendor.js import $ from '../assets/jquery-vendor.js' import 'jquery-ui' // 此时UI的方法全部可用，如果需要引用bootstrap，可参照此方法为了调用方便，可在webpack配置文件中创建jquery-vendor.js的别名 alias: { jquery : 'src/assets/jquery-vendor.js' // 将其指向jquery-vendor.js所在位置 } --------------------- 作者：蚁方阵来源：原文：https://blog.csdn.net/yiifaa/article/details/51916560 版权声明：本文为博主原创文章，转载请附上博文链接！

（转）VUE中使用 zTree -- jQuery 树插件 及 使用时报错 jQuery is not defined 的问题解决