vue-cli中找不到jquery的原因,以使用ztree为例

找不到 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' 删掉了。

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

原文地址:https://www.cnblogs.com/samve/p/13257703.html