vue路径中“@/“代表什么

最新推荐文章于 2025-06-06 11:04:12 发布
最新推荐文章于 2025-06-06 11:04:12 发布
阅读量1.1k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： vue+element 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wjw_de_java/article/details/134015101
文章讨论了Webpack配置中的路径别名，如`@`在`<imgsrc=@/../static/imgNew/adv/tupian.jpg>`中的含义，实际上它映射到了`src`目录，解释了`.`、`..`和根目录的使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

举例：

<img src="@/../static/imgNew/adv/tupian.jpg"/>

其中，@/是webpack设置的路径别名，代表什么路径，要看webpack的build文件夹下webpack.base.conf.js里面对于@是如何配置：
在这里插入图片描述
上图中@代表src,上述代码就等于：

<img src="@/../static/imgNew/adv/tupian.jpg" />
=
<img src="src/../static/imgNew/adv/tupian.jpg"/>

补充：

  • “./”：代表目前所在的目录。
  • " . ./"代表上一层目录。
  • “/”：代表根目录。
Vue中路径的`@/`和`./`有何区别
郭宝的博客
12-24 2958
`./` 的意思：          表示的是相对路径，具体代表当前目录下的同级目录，遵从的是从后往前找文件,   `@/` 的意思：           表示的是相对路径，具体代表什么路径要看项目根目录/build/webpack.base.conf.js 文件中@是如何配置的，比如我的配置文件中@就代表src目录，遵从的是从前往后找，比如'@/components/login' 就表示...
vue项目使用@ffmpeg/ffmpeg在客户端上传本地视频并处理的开发记录
Study_Live_Sun的博客
07-27 1万+
1、安装包 2、页面上传方法功能 vue页面 <input v-show="false" id="pop_video" type="file" accept="video/mp4" capture="camcorder" @change="getVideo" name="fileTrans" ref="file" value=""> 对应方法 getVideo (event) { if (this.player) { this.pl..
Vue 去除路径中的＃号
11-30
在开发过程中发现路径中带有/#/的标示，而且还去不掉，很丑陋。 众所周知，vue-router有两种模式，hash模式和history模式。 带＃的则是hash模式。 将router中的mode设置为history就可以了 接下来有个问题，界面一刷新，就变404了！！！！ 网上搜了下，需要对后端环境进行一个配置。 这里只列举nginx的配置，其他的配置点击这里去官网看 先配置config/index.js 修改assetsPublicPath为根目录 module.exports = { build: { env: require('./prod.env'),
vue中@符号表示什么意思？
qq_42526440的博客
11-29 1694
./这是相对路径的意思。 @/这是webpack设置的路径别名。 这东西在vue标准模板里面的build/webpack.base.conf这个文件里面。 resolve: { // 路径别名 alias: { '@': resolve('src'), 'vue$': 'vue/dist/vue.esm.js' }} 就是说@这东西代表着到src这个文件夹的路径。 ...
Vue项目配置@路径别名
最新发布
爱的叹息的专栏
06-06 493
本文介绍了Vue项目中配置和使用@路径别名指向src目录的方法。主要步骤包括：1) 打开vite.config.ts文件；2) 在resolve.alias中添加配置'@': path.resolve(__dirname, './src')；3) 在项目中以@/xxx形式导入文件。该别名能简化路径引用，提高开发效率。默认Vue3+Vite项目已内置此配置，如需手动设置可参考文中代码示例和说明。
vue中引入路径@的用法及说明
weixin_42508745的博客
01-30 1754
引用 https://blog.csdn.net/weixin_44836531/article/details/131061927。
Vue文件路径引入
weixin_34211761的博客
06-19 1482
转载于:https://www.cnblogs.com/huancheng/p/11052585.html
【vue】@、@/、../和./的区别
天亮就睡
05-30 1371
源自https://www.cnblogs.com/cyfeng/p/11928255.html。：在build文件夹下webpack.base.conf.js找到@，便能知道@代表什么了;：表示vue语法中v-on的简写；绑定事件的专用格式。当事件触发的时候，函数才会来调用；这里指向src文件夹。: 表示父级目录。
require('@/assets/more2.png'), require('@/assets/more3.png'), require('@/assets/more4.png') ], swiperOp
10-23
这是Vue.js中使用的动态加载图片数组示例。`require('@/assets/more2.png')`, `require('@/assets/more3.png')`, 和 `require('@/assets/more4.png')` 是通过Webpack等模块打包工具引入静态资源路径，这里的`@`通常...
NodeJS以及@vue/cli的安装
06-13
在提供的文件名`node-v16.17.1-x64.msi`中，`v16.17.1`表示版本号，`x64`代表64位系统。点击下载最新稳定版。 2. 运行下载的`.msi`安装文件，按照向导提示进行安装。一般会默认选择典型安装，这将把Node.js安装在...
This dependency was not found: * @/src/api/bid/information.js in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/information/list.vue?vue&type=script&lang=js& To install it, you can run: npm install --save @/src/api/bid/information.js
03-08
路径中的@符号通常是在Vue或Webpack项目中配置的别名，代表src目录。所以，正确的路径应该是@/api/bid/information.js，而不是@/src/api/...，因为@已经指向src了，加上src会导致路径重复。 接下来，我需要检查用户...
Vue中 @表示的路径
IU
06-19 4822
Vue中@表示的是什么？ 如果你新建了一个项目 那么可以在 build->webpack.base.config.js中发现如下图 resolve指路径别名，即@表示的是src中的路径，如果你想选择src中的view，那你要这样使用 @/view ...
Vue常见简写 “:“ , “@“ , “#“
xwnxwn的专栏
04-07 3819
首先需要了解一下v-bind,v-bind指令指示Vue将元素的id属性与组件的tabalData属性保持一致.如果绑定的值为null或undefined,那么该属性将从渲染的元素上移除.通常想要响应式的绑定一个属性,都会选择v-bind.而 : 就是v-bind的简写形式,可能看起来和一般的HTML属性长得不太一样,但它的确是合法合规的属性绑定字符,并且所有支持Vue的浏览器都可正常解析它.并且,它不会出现在最终渲染的Dom中,相信在你深入了解过它后,会喜欢这种写法的.label: "日期",
vue 中的@、@/和./的区别
热门推荐
优快云_Alisa的博客
06-30 2万+
@：表示vue语法中v-on的简写；绑定事件的专用格式。当事件触发的时候，函数才会来调用。 使用格式，在标签内部添加v-on:事件名="事件" 注意：Vue实例中所有的函数必须放在methods对象中，否则利用v-on绑定的事件，系统会报找不到该事件的错误 @ /：表示 src目录下； . /：表示当前目录下； ...
Vue中路径的@/和./ 的区别
Mygongzi的博客
03-15 6564
Vue中路径的@/和./ 的区别
Vue中的路径表示法@/和./
Kisushotto的博客
02-27 535
./:当前目录下 @/:Vue项目的src目录下 …/:当前文件所在目录的上级目录下
vue项目中有时间文件路径上有@，代表什么意思？
飞翔的熊blabla
01-15 626
./这是相对路径的意思，同级目录。 ../上级目录。 @/这是webpack设置的路径别名。 在build/webpack.base.conf这个文件里面设置了@具体指的是什么 resolve: { // 路径别名 alias: { '@': resolve('src'), 'vue$': 'vue/dist/vue.esm.js' } }, 就是说@这东西代表着到src这个文件夹的路径。...
在Vue项目导入路径中@符号是什么意思?
Meta.Qing的博客
08-28 1252
我开始了一个新的vue.js项目，所以我使用vue-cli工具脚手架出一个新的webpack项目(即vue init webpack)。这是通过Webpack解析完成的。
Vue 导入文件import、路径@和.的区别
hjh15827475896的博客
10-31 5260
Vue 导入文件import、路径@和.的区别 ***import： html文件中，通过script标签引入js文件。 而vue中，通过import xxx from xxx路径的方式导入文件，不光可以导入js文件。 “xxx”指的是为导入的文件起一个名称，不是指导入的文件的名称，相当于变量名。 “xxx路径”指的是文件的相对路径. 例如： 在路由index.js中，导入apple.vue和banana.vue import banana from '@/components/banana'
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值