vue-cli中找不到jquery的原因,以使用ztree为例
发布日期:2021-05-07 01:00:54 浏览次数:11 分类:技术文章

本文共 735 字,大约阅读时间需要 2 分钟。

找不到 jQuery 了,什么回事呢?

原来呀,以前是使用 <script> 标签来加载 jquery 的,并且会将其挂载到全局中,所以在执行 jquery.ztree.core.js 时能正常地获取到 jQuery 。而在 vue 项目中,经过 webpack 打包后,在 main.js 中导入的 $ 和 jquery.ztree.core.js 是各自处在不同的上下文环境的,自然就不能找到 jQuery 了。

如何解决?修改 webpack 配置:

build/webpack.base.conf.js

const webpack = require('webpack')module.exports = {    rules: [],    node: {},    plugins: [      new webpack.ProvidePlugin({        $: 'jquery',        jquery: 'jquery',        'window.jQuery': 'jquery',        jQuery: 'jquery'      })    ]}

上面代码使用了 webpack 的 ProvidePlugin 插件,这个插件在加载某个模块时,如果遇到了未定义的并且在配置文件中配置了的变量,比如上面代码看到的 $、jquery、jQuery、window.jQuery,就会自动导入对应的依赖项,比如上面代码中的 jquery 模块。

同时,你也不需要再在项目中显式地导入 jquery 了,也就是说你可以将 main.js 中的 import $ from 'jquery' 删掉了。

重新启动项目,页面没有报错。

上一篇:iframe子页面与父页面之间通信
下一篇:【学习笔记】Treap和无旋Treap

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.90.31.176]2025年04月03日 17时39分44秒