vue项目开发时，怎么让vscode提示@/的路径（vscode解决路径别名的路径提示）

最新推荐文章于 2024-05-20 10:30:08 发布
最新推荐文章于 2024-05-20 10:30:08 发布
阅读量1.6k 收藏 3
点赞数 1
分类专栏： 踩过的坑 文章标签： vscode vue.js ide
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41883423/article/details/125915604
版权

vue项目开发时，怎么让vscode提示@/的路径（vscode解决路径别名的路径提示）

问题

开发过程中，有时候使用@作为根目录下的src路径的别称进行资源引入，编辑器不会像是正常输入路径是给提示，导致对路径不是很熟悉的伙伴需要手动去拷贝路径名，很麻烦。

1

打开vscode编辑器;ctrl+shift+x;在界面上搜索在这里插入图片描述
找到path-alias，并安装

2

在输入@/…这样的别名路径时，你会发现也有路径提示啦！
在这里插入图片描述

帅比九日
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
75，小红书后端面试
m0_58269070的博客
04-14 432
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
vue中使用@的时候配置路径提示
haosicx的博客
02-14 500
新增配置文件 jsconfig.json 当我们路径中使用@的时候可以有提示 { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"], } }, "exclude": ["node_modules", "dist"] }
vscode：配置@路径提示，并解决Cannot find module ‘@/utils/xxx‘ or its corresponding type declarations.
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
02-07 8096
vscode配置@路径提示，并解决由于@找不到模块的一些报错
在vscode中配置Vue项目的别名路径联想提示
最新发布
听海边涛声
05-20 231
在vscode中配置Vue项目的别名路径联想提示
vscode 设置提示 @ 路径 和 ~@ 路径 和 使用 prettier 一直把大写的PX转换成小写解决办法
PBitW的博客
05-17 1649
vscode 设置提示 @ 路径 和 ~@ 路径 vscode 使用 prettier 一直把大写的PX转换成小写解决办法
Vue项目中使用@代替src——并在VScode中开启@路径自动提示
qq_45225759的博客
06-24 1307
vue项目设置@路径提示，@代替src
vue3+ts vscode无法识别/@/ 路径
weixin_42353499的博客
09-30 4027
在tsconfig.json中添加下面的配置即可 { "compilerOptions": { "paths": { "/@/*": ["src/*"] } } }
vscode中Vue别名路径提示的实现
10-15
主要介绍了vscode中Vue别名路径提示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
通过这个示例项目，你可以了解到如何在 Vue3.x、Vite 和 TypeScript 的环境中设置和使用 Vue Router 4.x，这将对你的前端开发技能有极大的提升。同时，实践项目也能帮助你更好地理解和掌握这些技术的实战应用。
Vue项目 Router路由，Pinia状态管理, Vuex状态管理 Vant List组件案例
11-16
综上所述，这个 Vue 项目涵盖了前端开发中的关键技术点，从路由管理到状态管理，再到 UI 组件的使用和数据请求，构建了一个功能丰富的应用实例。开发者可以通过此项目学习和实践 Vue.js 开发的各个方面。
让IDE识别webpack的别名alias的实现方法
11-20
通常是 `<projectRoot>/node_modules/@vue/cli-service/webpack.config.js`，这个配置文件包含了项目的Webpack配置，包括别名设定。保存设置并重启IDE后，不仅 `src` 目录，其他自定义的别名，如 `utils` 等，也将被...
vue学习笔记：在vscode中使用@提示路径
杨威的博客
05-03 3278
在vscode中输入“@/"后如果可以智能提示路径，可以有效防止路径名称输入错误，减少不必要的麻烦。效果如下图所示： 安装"Path Autocomplete"插件后可以实现路径的智能提示，步骤如下： 1、在vscode中查找Path Autocomplete插件 2、安装插件 3、在vscode中选择“文件-首选项-设置”，在设置页面右上角点击图标打开settings.json配置文件 4、在配置文件中添加如下代码在 //导入文件时是否携带文件扩展..
vite配置@别名，以及如何让vscode智能提示路经
qq_59517460的博客
01-03 452
【代码】vite配置@别名，以及如何让vscode智能提示路经。
vscode 中vue导入模块的@路径提示以及采用@后报错显示not found
Hannah_Hannah_的博客
06-13 6594
上图点击【扩展设置】后进入下图点击上图的【步骤 2】之后，进入下图的 【settings.json】文件中，添加下列框出的代码、 以上是下载的插件的基本配置接下来是取别名的配置如果没有jsconfig.json文件，那就自己建一个（！！！名字要一摸一样） 以上情况就基本上成功了，如果@路径还不生效的话 ，看看自己的文件中是否使用了tsconfig.json文件， 如果有的话，需要在tsconfig.json中添加配置 "allowJs": true， 最后就成功啦！！！！！.........
Vue项目中../路径./路径@/路径~@/路径的区别
weixin_55472979的博客
02-16 821
Vue项目中../路径./路径@/路径~@/路径的区别
vscode 中，vue导入组件路径提示
zhu_liu_kun的博客
12-31 1553
vscode 中，vue导入组件路径提示
127-Vue中“@/”路径提示配置
jolinoy的博客
07-20 1113
在VScode中安装PathIntellisense插件。打开设置-首选项-搜索。所在同级目录下创建文件。
vscode不识别@，vue项目@不能点击跳转
qq_40751933的博客
08-09 2142
如果不行，再在本地项目根目录添加jsconfig.json文件。vscode不识别@，vue项目@不能点击跳转。先安装vue peek，看看报不好使。
vue3项目绝对路径重命名后vscode无法提示路径，无法进行文件跳转
oschina_41559824的博客
03-07 596
文件本身可以选择列出属于该项目的文件、要从项目中排除的文件以及编译器选项。目录中存在这样的文件表明该目录是。模块），两者之间就没有公共项目上下文文件。增加完后点击vue组件就可以进行文件跳转。根据vscode官网给出的解释。文件被视为独立单元。
vue3 中v-for循环@/路径图片无法显示
06-03
这可能是因为在 Vue 3 中，模板表达式（如 v-for 中的变量）默认是只读的，不能修改。因此，如果你在 v-for 中使用了相对路径，可能会导致图片无法显示。 解决这个问题的方法是使用 require() 函数将相对路径转换为绝对路径。例如： ``` <template> <div> <img v-for="image in images" :src="require(`@/assets/${image}`)" /> </div> </template> <script> export default { data() { return { images: ['image1.jpg', 'image2.jpg', 'image3.jpg'] } } } </script> ``` 在上面的代码中，我们使用 require() 函数将相对路径转换为绝对路径，从而确保图片可以正确显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值