Vue-CLI中同时引入jQuery出现Chrome报错但不影响使用的问题

解决方案 #

嘿，这个问题其实是重复引入jQuery导致的实例冲突——你同时通过webpack的ProvidePlugin注入了一个jQuery实例，又在index.html里通过script标签引入了另一个，两个实例在浏览器环境里共存，就会出现类似$ is not defined或者插件绑定失效的报错。虽然暂时项目能用，但这种冲突很容易引发后续潜在问题，比如某些依赖jQuery的功能突然罢工，得赶紧处理掉。下面给你两种靠谱的解决办法：

方案一：只保留webpack的jQuery配置，移除index.html里的jQuery引入 #

这种方式更符合Vue-CLI的工程化思路，把依赖统一交给webpack管理：

1. 删掉index.html里的<script src="./static/jquery-2.1.4.js"></script>这一行
2. 在main.js里按顺序引入jQuery和layer.js，确保layer能拿到正确的jQuery实例：

// main.js
// 先引入jQuery
import './static/jquery-2.1.4.js'
// 再引入依赖jQuery的layer
import './static/layer/layer.js'

// 之后是你的Vue实例代码
new Vue({
 el: '#app',
 store,
 router,
 template: '<router-view></router-view>',
})

这样webpack会把这两个文件打包进项目，同时因为ProvidePlugin的配置，全局的$和jQuery也能正常使用。

方案二：保留index.html的全局引入，移除webpack的ProvidePlugin配置 #

如果更习惯通过script标签管理全局依赖，那就把webpack里的注入配置去掉：

1. 打开webpack.base.conf.js，删掉ProvidePlugin的配置块：

// 删掉这段代码
new webpack.ProvidePlugin({
 jQuery: "jquery",
 $: "jquery"
})

2. 确保index.html里的jQuery在layer.js之前引入（你现在的顺序已经是对的，不用改），这样layer.js会自动绑定全局的jQuery实例，webpack打包的代码也能直接使用全局的$和jQuery。

两种方案选一种就行，都能解决重复引入导致的报错问题～

内容的提问来源于stack exchange，提问作者Yeachan