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

最新推荐文章于 2024-05-30 10:30:00 发布
原创 最新推荐文章于 2024-05-30 10:30:00 发布 · 1.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

文章讨论了Webpack配置中的路径别名，如`@`在`<imgsrc=@/../static/imgNew/adv/tupian.jpg>`中的含义，实际上它映射到了`src`目录，解释了`.`、`..`和根目录的使用。

举例：

<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 3014
`./` 的意思：          表示的是相对路径，具体代表当前目录下的同级目录，遵从的是从后往前找文件,   `@/` 的意思：           表示的是相对路径，具体代表什么路径要看项目根目录/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中~@和@的区别
前端学习笔记
01-07 3261
以@开头的url，会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向的别名。指向的是src目录，且只能在和中使用，在中使用会报错。
vue配置src为@（根目录）
weixin_44161385的博客
03-03 1323
在vue.config.js（初始生成文件名为babel.config.js）中增加代码（ chainWebpack: config => { config.resolve.alias .set(’@’, resolve(‘src’)) } ）： const path = require('path') const resolve = dir => path.join(__dirname, dir) module.exports = { baseUrl: './', runti
Vue路径写法：./ 和 @/
Wind的博客
04-12 2107
Vue路径写法：./ 和 @/
vue项目中 路径使用的@
weixin_44068394的博客
04-07 1477
@一般都是在路径访问中使用 我们在build/webpack.base.conf这个文件里面定义。 默认定义：@这东西代表着到src这个文件夹的路径 我们可以自己添加 (也可以作为一个小技巧使用) ： ...
vue中@符号表示什么意思？
qq_42526440的博客
11-29 1818
./这是相对路径的意思。 @/这是webpack设置的路径别名。 这东西在vue标准模板里面的build/webpack.base.conf这个文件里面。 resolve: { // 路径别名 alias: { '@': resolve('src'), 'vue$': 'vue/dist/vue.esm.js' }} 就是说@这东西代表着到src这个文件夹的路径。 ...
vue里@/components/header.vue什么意思，@什么意思
07-09
在Vue项目中，`@/components/header.vue` 是一个文件路径的引用，其中 `@` 是一个特殊的别名（alias），通常代表项目的根目录（src目录）。这种别名配置在构建工具（如Webpack、Vite等）中设置，使得在导入模块时...
ERROR Failed to compile with 1 error 上午12:14:54 This dependency was not found: * @/views/dashboard/index.vue in ./src/router/index.js To install it, you can run: npm install --save @/views/dashboard/index.vue
07-18
1. 在Vue项目中，如何正确配置Webpack别名（alias）来使用@符号代表src目录？ 2. 如果路由配置中使用了动态导入（懒加载），出现类似模块找不到错误，应如何排查？ 3. 除了路径错误，还有哪些常见原因会导致Vue编译...
vue路径中“#/“代表什么
最新发布
07-24
1. Vue Router 中的 `history` 模式与 `hash` 模式有什么区别？ 2. 如何在 Vue.js 中实现编程式导航？ 3. Vue Router 如何配置嵌套路由？ 4. 在 Vue.js 中如何实现动态路由匹配？ 5. 如何在 Vue Router 中使用命名...
vue中引入路径@的用法及说明
weixin_42508745的博客
01-30 1940
引用 https://blog.csdn.net/weixin_44836531/article/details/131061927。
【vue】@、@/、../和./的区别
天亮就睡
05-30 1591
源自https://www.cnblogs.com/cyfeng/p/11928255.html。：在build文件夹下webpack.base.conf.js找到@，便能知道@代表什么了;：表示vue语法中v-on的简写；绑定事件的专用格式。当事件触发的时候，函数才会来调用；这里指向src文件夹。: 表示父级目录。
Vue---在vue路径中@的使用
前端与计算机相关知识的分享，博主的qq523235674
02-19 2610
1.@表示项目文件夹src目录 'src/index.vue' 等价于 '@/index.vue' 2.如果在css代码中则需要在前面加~ 在css代码中 @import 'src/index.css'; 等价于 @import '~@/index.css';
vue中引入路径@的用法
zszcc的博客
09-14 6453
一、Vue文件中引用路径的介绍 1、路径 ./ ./当前文件同级目录 2、路径 …/ …/当前文件上一级目录 3、@符号 @ 的作用是在你引入模块时，可以使用 @ 代替 /src 目录，避免易错的相对路径。 二、Vue中使用 1. vue.config.js配置文件中使用 chainWebpack(config) { config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('s
Vue文件路径引入
weixin_34211761的博客
06-19 1493
转载于:https://www.cnblogs.com/huancheng/p/11052585.html
Vue中 @表示的路径
IU
06-19 4831
Vue中@表示的是什么？ 如果你新建了一个项目 那么可以在 build->webpack.base.config.js中发现如下图 resolve指路径别名，即@表示的是src中的路径，如果你想选择src中的view，那你要这样使用 @/view ...
vue配置@路径
qq_44161722的博客
10-12 1363
第二步：在vue.config.js文件（如果没有就新建）中配置。第一步：安装path，如果node_module文件夹中有。
Vue常见简写 “:“ , “@“ , “#“
xwnxwn的专栏
04-07 4357
首先需要了解一下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目录下； . /：表示当前目录下； ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值