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

最新推荐文章于 2022-04-26 15:02:21 发布
最新推荐文章于 2022-04-26 15:02:21 发布
阅读量4.9k 收藏 10
点赞数 3
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yth_m_123/article/details/106242224
版权
在Vue-cli搭建的项目中，若没有./build目录，需在node_modules/@vue/cli-service/webpack.config.js配置使用jQuery。步骤包括安装jQuery，修改webpack.config.js，然后在组件中导入并使用。
摘要由CSDN通过智能技术生成

在使用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 con
最低0.47元/天 解锁文章
yth_m_123
关注
vue-cli脚手架build目录中的webpack.base.conf.js配置文件详解
weixin_43346192的博客
03-13 1125
webpack.base.conf.js：vue开发环境的wepack相关配置文件，主要用来处理各种文件的配置。 webpack.dev.conf.js：开发环境的配置文件 webpack.prod.conf.js：生产环境的配置文件 此文章主要介绍webpack.base.conf.js 的详细属性 // 引入nodejs路径模块 var path = require('path'...
没有webpack.config.js如何配置less ？？
01-08
首先我们最新创建的项目；无论是vue或者react项目，你都找不到webpack.config.js，甚至没有原来的build文件夹，那我们如何配置less或者jq这种插件呢？接下来进入正题 配置less 1.安装less less-loader  打开我们的项目目录，打开CMD终端，安装命令如下 yarn add less less-loader 或者 npm install less less-loader 2.git commit一下 git add . git commit -m 'xx' 3. yarn eject生成config目录及你想要的webpack.config.js 在
没有webpack.base.conf.js引入scss
weixin_52104874的博客
04-26 911
建议一个与vue.config.js同级的webpack.base.conf.js文件，同时引入 module.exports={ module:{ rules:[ { test: /\.scss$/, loaders: ['style', 'css', 'sass'] } ] } } 即可使用scss ...
vue cli3找不到webpack.base.conf.js，可以这样引入jquery
qq_45668489的博客
03-23 8939
如何在vue-cli 3.x中使用jquery 由于项目需求要使用jquery，结果各种引用都不济于事。 首先下载 jquery。 cnpm install jquery --save-dev 或者 添加依赖，在package.json中找到dependencies模块，然后往里面追加jQuery，以jq版本2.2.3为例： “dependencies”: { “vue”: “^2.3.3”, ...
Vue中------webpack.config.js在哪儿
热门推荐
qq_41797053的博客
09-07 3万+
上图是通过Vue init webpack-simple创建的目录，默认没有node-modeules文件，自己下载 上图是vue init webpack 创建的目录，webpack.config.js文件配置到 build=>webpack.base.conf.js文件中，所以没有该文件名称。 网上推荐用中小项目用第一中，大项目用第二种。区别不知道在哪儿，知道的小伙伴望留言...
vue-cli脚手架build目录中的webpack.base.conf.js配置文件
ricardo_rie的博客
06-17 2167
此文章用来解释vue-cli脚手架build目录中的webpack.base.conf.js配置文件 此配置文件是vue开发环境的wepack相关配置文件，主要用来处理各种文件的配置 关于注释 当涉及到较复杂的解释我将通过标识的方式(如（1）)将解释写到单独的注释模块，请自行查看 上代码 ...
vue中webpack.dev.conf.js：和webpack.base.conf.js,
周家大小姐
05-03 5805
'use strict' const utils = require('./utils')// 工具类 const webpack = require('webpack') // 获取配置文件中默认的配置 const config = require('../config') const merge = require('webpack-merge')// 使用webpack配置合并插件...
vue打包配置的详细说明【config/index.js的build部份】
ying940718的博客
01-07 4394
index: path.resolve(__dirname, '../dist/index.html') 打包生成的文件路径 __dirname：代码所在路径，字符串格式 assetsRoot: path.resolve(__dirname, '../dist'), 包含应用程序的所有静态资产的根目录（绝对路径） assetsSubDirectory: 'static', 被编译之后的资源...
vue.js项目中实用的小技巧汇总
11-27
为简化文件路径引用，可以在`build/webpack.base.conf.js`中配置别名。例如，你可以定义`@`代表`src`目录，这样引用文件时可以更简洁： ```javascript resolve: { alias: { '@': path.resolve(__dirname, '../src...
webpack.config.js
08-19
webpack之代码打包分离-DllReferencePlugin及DllPlugin
webpack.base.conf.js
weixin_30687811的博客
06-30 783
var path = require('path')var utils = require('./utils')var config = require('../config')var vueLoaderConfig = require('./vue-loader.conf') // 给出正确的绝对路径function resolve (dir) { return path.join(__di...
vue-cli中webpack配置之webpack.base.conf.js
wo_ai_ni___的博客
11-24 2587
配置内容 var path = require('path') var utils = require('./utils') var config = require('../config') var vueLoaderConfig = require('./vue-loader.conf') // 获取根目录 function resolve(dir) { return path.join(__dirname, '..', dir) } module.exports = { /...
webpack.base.conf.js文件
倾世~茹薇
04-27 5783
文件开头的path模块提供了用于处理文件和目录路径的使用工具。utils是vue开发环境的wepack相关配置文件，主要用来处理css-loader和vue-style-loader。引入config目录下的index.js配置文件，主要用来定义一些开发和生产环境的属性。vue-loader.conf配置文件是用来解决各种css文件的，定义了诸如css,less,sass之类的和样式有关的load...
vue-cli脚手架之开发环境的webpack配置——webpack.base.conf.js
hzzyli的博客
11-14 915
webpack相关的重要配置文件将在这一节给出。webpack水很深，在此先弄清楚原配文件内容的含义，后续可以自己根据实际情况配置。 webpack.base.conf.js:配置vue开发环境的webpack配置，处理各种文件（js、css、vue、图片、视频…） // An highlighted block 'use strict'//js严格模式执行 const path = requir...
webpack打包vue-cli项目之webpack.base.conf.js文件分析
qq_41948178的博客
09-11 1524
开场 当我们使用vue-cli创建项目的时候，build文件夹的配置文件里面除了拥有编译相关的dev文件和打包相关的prod文件以外，还有另外一个使用很频繁的base文件。这个base里使用了一些编译和打包时候都会用到的信息，所以被单独提取出来。因此我们在学习webpack打包过程的时候，也要知道这个文件里的对象含义。 上代码 'use strict' const path = require('...
webpack构建vue项目
Angela
10-28 2962
众所周知，vue运行及打包命令：npm run dev 、npm run build.vue脚手架工程，每次只能运行一个服务，如果有两个工程，需要两套vue脚手架，同理，有10套工程就要10套vue脚手架。楼主工作中遇到的情况就是如此，由于项目的需要，产品的不同模块对应后端不同的打包地址，因此，前端就需要将不同的页面进行打包，进而衍生出多个vue工程。请看下图...
20191023——复习webpack.base.conf.js
寄蜉蝣于天地，渺沧海之一粟。
10-23 481
此文章来解释vue-cli脚手架中，build目录中的webpack.base.conf.js配置文件 var path = require('path') //引用node.js模块 var utils = require('./utils') //主要处理css-loader var config = require('../config') //引入config目录下的index.j...
vue-cli webpack.base.conf.js学习
Master12138的博客
11-30 584
'use strict' //引入nodejs路径模块 const path = require('path') //引入utils工具模块，utile主要用来处理css-loader和vue-style-loader const utils = require('./utils') //引入config/index.js配置文件，定义开发和生产环境的属性 const config = require('../config') //vue-loader.conf配置文件，主要是配置vue-loader的op
在vue中webpack.config.js文件在哪里和webpack配置在哪里
最新发布
06-11
在 Vue 项目中使用 webpack 通常不需要手动创建 `webpack.config.js` 文件，因为 Vue CLI 已经为我们生成了一个默认的配置文件。这个默认的配置文件在 Vue CLI 3 及以上版本中位于项目根目录下的 `vue.config.js` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值