Vue-Cli 3 集成 Jquery 的终极教程：常见问题和注意事项

在 Vue-Cli 3 中集成 Jquery 的终极指南

作为一名经验丰富的程序员，我经常遇到需要在 Vue-Cli 3 项目中集成 Jquery 的情况。虽然 Jquery 可能会带来一些问题，但它仍然是与某些第三方库集成或处理遗留代码的宝贵工具。

问题：如何在 Vue-Cli 3 中添加 Jquery？

Vue-Cli 3 中 webpack 配置的更改意味着添加 Jquery 的方法与以前的版本不同。我们有两种常见的方法：

1. 修改 vue.config.js
2. 使用 webpack ProvidePlugin

解决方案

1. 修改 vue.config.js

module.exports = {
  chainWebpack: config => {
    config.plugin('define').tap(definitions => {
      definitions[0] = Object.assign(definitions[0], {
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery'
      })
      return definitions
    })
  }
}

2. 使用 webpack ProvidePlugin

const webpack = require('webpack')

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

步骤

1. 安装 Jquery： npm install --save jquery
2. 在 main.js 中导入 Jquery： import $ from 'jquery'
3. 根据所选方法，修改 vue.config.js 或添加 ProvidePlugin
4. 运行 npm run serve 重新编译项目

注意事项

• 如果你使用的是 webpack ProvidePlugin，确保在 package.json 中包含 jquery 依赖项。
• 避免同时使用这两种方法，因为这可能会导致冲突。

结论

通过遵循这些步骤，你应该能够在 Vue-Cli 3 项目中成功添加 Jquery。如果你遇到任何问题，请随时在评论中提问。

常见问题解答

1. 为什么需要在 Vue-Cli 3 中集成 Jquery？

Jquery 是与某些第三方库集成或处理遗留代码时的宝贵工具。

2. 修改 vue.config.js 和使用 webpack ProvidePlugin 有什么区别？

两种方法都会将 Jquery 添加到你的项目中，但它们使用不同的方法。修改 vue.config.js 会在编译时注入全局变量，而使用 webpack ProvidePlugin 会在运行时注入这些变量。

3. 同时使用修改 vue.config.js 和使用 webpack ProvidePlugin 会怎么样？

不建议同时使用这两种方法，因为这可能会导致冲突。

4. 我在安装 Jquery 后仍然无法使用 $ 符号。

确保你在 main.js 中导入了 Jquery：import $ from 'jquery'。

5. 我得到一个错误，提示 "$ 不是一个函数"。

这可能是因为你没有正确安装 Jquery。尝试重新安装 Jquery 或从 CDN 加载它。