VUE项目里使用jquery错误

Question

错误提示
"ReferenceError: $ is not defined"

我已经安装了jquery
npm install jquery

在main.js文件内调用
import $ from "jquery"

vuecli-4.1.2

Answer 1

参考GPT和自己的思路：

根据您所提供的信息，可能出现该错误的原因是您在使用jQuery时未正确引用或初始化它。可能的解决方案是在您的项目中正确引用jQuery，并在需要使用它的地方初始化它。

您可以在index.html文件中使用以下方式全局引入jQuery：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

或者，在main.js文件中通过import导入jQuery，然后在需要使用它的Vue组件中初始化它。您可以尝试以下代码：

// main.js
import $ from "jquery";
window.$ = $;

// 组件中可以通过以下方式使用jQuery
$("selector").doSomething();

请注意，如果您使用的是Vue CLI 3及以上版本，您可能需要在vue.config.js文件中配置Webpack以将jQuery作为全局变量使用。以下是一个示例配置：

// vue.config.js
const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ]
  }
}

希望这些信息能够帮助您解决问题！