vue中不通过./build/webpack.base.conf.js 配置使用jquery

最新推荐文章于 2023-07-24 11:20:07 发布

原创最新推荐文章于 2023-07-24 11:20:07 发布 · 5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue

在Vue-cli搭建的项目中，若没有./build目录，需在node_modules/@vue/cli-service/webpack.config.js配置使用jQuery。步骤包括安装jQuery，修改webpack.config.js，然后在组件中导入并使用。

部署运行你感兴趣的模型镜像

在使用vue-cli搭建的项目中，是无法直接在组件中使用jquery的。如果想使用，要先进行一些配置。

网上许多文章都是介绍如何在./build/webpack.base.conf.js文件中配置使用jquery，但是有些人的项目目录中没有./build，这应该只是脚手架搭建的目录结构不同。

这时候应该找node_modules/@vue/cli-service/webpack.config.js这个文件，进行配置。

1.安装jquery

$ cnpm install jquery -S
或者
$ npm install jquery -S

2.配置webpack.config.js
下图是我的项目目录：
在这里插入图片描述
node_modules这个目录大家应该都有。
按照node_modules/@vue/cli-service/webpack.config.js这个路径找到webpack.config.js文件。
进行修改，修改后的内容如下：

// this file is for cases where we need to access the
// webpack config as a file when using CLI commands.

let service = process.VUE_CLI_SERVICE

if (!service || process.env.VUE_CLI_API_MODE) {
  const webpack = require('webpack')
  const Service = require('./lib/Service')
  service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
  service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
}

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