main.js中我们引用了 jquery，$符号我们可以正常使用，但 window.$却不能，而且其他vue组件中也引用不到$；为什么呢？因为webpack是最后会把代码用闭包的方式打包，$对象并没有挂载在window下，其他组件中并没有引用jquery所以它自然是拿不到的，那么怎么能做到在main.js中一次引用，每个组件都能拿到呢？

方法一：expose-loader 讲jquery暴露至全局

操作

终端

npm i expose-loader -D //安装expose-loader

webpack.config.js （vue-cli 创建的项目可在 webpack.base.conf.js）中配置当引用 jquery 时使用 expose-loader

module: {
rules: [
{
test: require.resolve('jquery'),
loader: 'expose-loader?$'
}
]
}

方法二：webpack插件法，给每个模块注入$

操作

webpack.config.js（vue-cli 创建的项目可在 webpack.base.conf.js）

const webpack = require('webpack')

plugins:[
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery",
})
]

通过以上两种方法后，我们可以在组件中使用jquery了

App.vue

<template>
<div>
<h4>这是App组件</h4>
</div>
<template>

<script>
$('h4').css('color','#c87')
</script>

<style scoped>

</style>

• 点赞
• 收藏
• 分享
• 文章举报