Vue项目中如何正确引入jQuery子模块并配置Webpack ProvidePlugin

1. 修改ProvidePlugin指向子模块的jQuery打包文件 #

把webpack配置中ProvidePlugin的所有jQuery相关指向，从npm安装的jquery包替换为你子模块中带所有UI插件的jQuery打包文件路径。这样Vue应用全局的$、jQuery都会直接关联到这个带插件的版本。

示例配置：

const path = require('path');

new webpack.ProvidePlugin({
  $: path.resolve(__dirname, './src/submodules/your-jquery-ui-bundle/jquery-with-plugins.js'),
  jquery: path.resolve(__dirname, './src/submodules/your-jquery-ui-bundle/jquery-with-plugins.js'),
  'window.jQuery': path.resolve(__dirname, './src/submodules/your-jquery-ui-bundle/jquery-with-plugins.js'),
  jQuery: path.resolve(__dirname, './src/submodules/your-jquery-ui-bundle/jquery-with-plugins.js')
})

2. 配置resolve.alias强制统一jQuery模块 #

通过webpack的resolve.alias配置，强制所有对jquery的导入请求都指向子模块的打包文件，彻底避免webpack解析到多个jQuery版本。

示例配置：

resolve: {
  alias: {
    // 结尾的$是精确匹配，防止匹配到类似jquery-ui的其他模块
    'jquery$': path.resolve(__dirname, './src/submodules/your-jquery-ui-bundle/jquery-with-plugins.js')
  }
}

3. 确保子模块打包文件的独立性 #

确认你的子模块jQuery打包文件已经包含所有需要的UI插件，且没有将jQuery标记为外部依赖（如果子模块是单独用webpack打包的，检查其配置中的externals，不要把jQuery设为外部依赖，确保它是自包含的）。

4. 在Vue应用中加载子模块打包文件 #

在Vue的入口文件（比如main.js）中直接导入子模块的打包文件，确保它被webpack纳入打包流程：

// main.js
import './src/submodules/your-jquery-ui-bundle/jquery-with-plugins.js';

验证 #

在任意Vue组件中测试jQuery插件功能，比如调用某个UI插件的方法：

// 组件内代码
mounted() {
  // 测试子模块中的UI插件
  $('#some-element').yourUiPluginMethod();
}

如果能正常执行，说明配置生效，已经统一使用子模块的jQuery版本。

内容的提问来源于stack exchange，提问作者michail.logozar