Vue如何给组件里面的路径起别名及引用？

最新推荐文章于 2023-12-29 15:25:40 发布
最新推荐文章于 2023-12-29 15:25:40 发布
阅读量1.3k 收藏
点赞数
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46054543/article/details/114897452
版权
在Vue项目中，为了避免深层级文件路径导致的引入错误，可以通过配置webpack的resolve别名来简化引用。默认情况下，'@'已映射为'src'目录。在webpack.base.conf.js中，用户可以自定义更多别名。对于非import导入的组件，需在引用时使用'~'前缀确保别名生效。
摘要由CSDN通过智能技术生成

一般的src查找路径都需要用到"…/"等，若文件夹很多层级很深的话容易出错。
在这里插入图片描述
因此可以起个别名方便查找。
首先在工程目录中找到build文件，在其中找到webpack.base.conf.js文件
在这里插入图片描述
找到resolve：里面这段代码，里面已经默认“@”为“src”的别名，按截图中的方式就可以自己给需要的文件起别名。（该方式仅适用于vue-cli3 即脚手架3）
在这里插入图片描述
需要注意的是，在组件里面引用的时候，因为组件不是import导入的，所以需要在最前面加上“~”才生效
在这里插入图片描述

产品迪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue3 第十三章】动态组件 & 递归组件 & 组件别名
前端知识分享喵
01-10 1580
动态组件 & 递归组件 & 组件别名定义
vue中的别名设置
sdufexsh的博客
01-13 3079
在管理路由的js文件中，引入路由经常看到 import Login from '@/views/Login.vue' @表示组件位于src路径 下，@是src的别名，在默认的vue.config.js文件中已经做了配置。 那么怎么管理别名呢？ 对于3.0+的Vue，新建vue.config.js。 const path = require('path') function resolve(dir) { return path.join(__dirname, dir); } module
Vue Router 路由组件传参
qq_26642611的博客
12-25 324
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 使用 props 将组件和路由解耦： 取代与 $route 的耦合 const User = { template: '<div>User {{ $route.params.id }}</div>' } const router = new VueR...
Vue\React配置别名总结
weixin_44476861的博客
11-14 1075
1.vue项目中配置别名 vue项目中其实自带了别名，即@表示src目录。可以在node-modules/@vue/cli-service/lib/config/base.js中看到配置。 由上面贴的代码可以看见，vue在使用vue-cli（查找资料说是从vue-cli3开始的）建立项目就自动配置src的别名和文件格式的省略。 所以你如果只需要src的别名的话，就可以不用配置了。一般我还会给assets和components文件夹配置别名。 在项目根目录下新建一个vue.config.js文件。vue.c
vue中给路径起别名
qq_46112274的博客
03-08 2150
1、在webpack.base.conf.js配置文件中给路径起别名 2、在vue文件中使用别名 2.1、在import中使用@ 2.2、在dom中使用别名（~） 3、修改了vue的配置文件，要重新npm run dev 正常访问
vscode中Vue别名路径提示的实现
10-15
主要介绍了vscode中Vue别名路径提示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue.config.js中配置Vue的路径别名的方法
10-15
路径别名的应用不仅限于静态资源，还可以为经常引用的Vue组件、工具函数等目录设置别名，例如： ```javascript module.exports = { configureWebpack: { resolve: { alias: { 'components': path.resolve('./...
Vue CL3 配置路径别名详解
12-07
在Vue CLI 3中，配置路径别名是一个非常实用的功能，...总的来说，Vue CLI 3中的路径别名配置通过`vue.config.js`文件提供了极大的便利，使得开发者能够更加灵活地组织项目结构，并简化模块间的引用，提升了开发效率。
Vue中使用webpack别名的方法实例详解
08-27
webpack别名是指在webpack配置文件中定义的一种路径别名，例如alias: { '@': resolve('src'), 'common': resolve('src/common'), 'components': resolve('src/components')}。 知识点2：webpack别名在JS中的应用 ...
【Vue】import引入接口名称时起别名
最新发布
新人一枚，互相学习哦！
12-29 1387
在项目中一个页面引入两个名称一样的接口，可以起别名来改变
如何在命名空间中用use引入类、方法，并创建别名
welcome to daijiguo's blog
06-15 2576
在PHP中，命名空间用来解决在编写类库或应用程序时创建可重用的代码如类或函数时碰到的两类问题： 用户编写的代码与PHP内部的类/函数/常量或第三方类/函数/常量之间的名字冲突。 为很长的标识符名称(通常是为了缓解第一类问题而定义的)创建一个别名（或简短）的名称，提高源代码的可读性。 //  导入Classname类，并为其创建别名Another use My\Full\Classn
vue组件命名方式/使用方式
imkaifan的博客
02-26 7437
1、定义组件名的方式有两种： 使用 kebab-case 当使用 kebab-case (短横线分隔命名) 定义一个组件时， 你也必须在引用这个自定义元素时使用 kebab-case，例如 。 Vue.component('my-component-name', { /* ... */ }) 使用 PascalCase 当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 和 都是可接受的。注意，尽管如此，直接 在 DOM (即非字符
vue中使用别名
国家一级程序员
02-12 677
vue中使用别名引入文件
VUE组件化开发
weixin_46216804的博客
10-13 623
VUE组件化学习
【Vue 开发小技巧】给组件路径配置别名
缚己
04-12 314
前几天在 GitHub 参考一位阿里大佬的项目源码，大佬的写法令我眼花缭乱，代码写得简直太 6 了。 其中一种写法让我大呼牛逼~。来看看： 这个 @ 是个什么操作？我发现它的 @ 指向的是 src 目录，我傻傻的尝试了一下，果不其然，报错了…… 在网上搜啊搜，它是通过改写 vue.config.js 文件实现的。但是网络上给出的答案有些老旧了。阿里大佬的写法： const path = require('path') const resolve = (dir) => path.join(__dirn
Vue给文件起别名——使用、报错及解决方法
Wzw的博客
03-12 3371
文件路径引用 在实战开发中，如果需要引用的文件层级很深，我们就可能遇到以下代码：<img src="../../../assets/image/home.icon"/>。 如果后续项目文件路径变化了呢？那么就需要手动去修改每个文件中的路径，在项目初始阶段文件不多时，这样做还有可能；一旦文件增多，这样一个个修改路径就很麻烦。 因此，我们需要在一开始时，就给文件夹起别名，这样不管层级多深或者文件路径更改，之后都直接用这个别名即可。 Vue-Cli3 在vue.config.js（如果没有，则在根目
Vue中获取第三方UI组件库类名并修改样式
weixin_42118522的博客
10-28 717
前言 明明是比较简单的问题，也曾经遇见过两次，被我整复杂了，愣是来回试了一个多小时，好记性不如烂笔头，为了防止下次还走弯路，记录一下，提醒自己。 问题 想要修改第三方组件库 loading 组件的样式，无论如何覆盖样式都不生效，加了 /deep/ 和 !important 也是白搭。 排查思路如下： 查看想要覆盖的样式是否是行内样式，不是行内样式，根据其优先级才可以覆盖生效 ---- 不是行内样式； 加 /deep/ 获取类名，未生效，加 !important, 不生效； 这里踩了一个大坑，以前遇到过
VUE如何引用组件
热门推荐
qq_31544819的博客
07-19 1万+
vue引用组件主要分为如下两种: 一:全局引用 1,现在main中引用组件: import 组件别名 from '组件路径' 2.注册组件 Vue.component('组件别名', 组件别名) 二:局部引用 1.在需要引用组件的页面中script下写如下代码 import 组件别名 from "组件路径"; 2.注册组件components:{组件别名} ...
vue给文件路径起别名
qq_44255146的博客
04-25 160
vue给文件路径起别名 1.在webpack.base.conf.js文件中的alias中写 resolve: { extensions: ['.js', '.vue', '.json'], //起别名 alias: { '@': resolve('src'), 'assets':resolve('src/assets'), 'components':resolve('src/cpmponents'), 'views':resolve('src/vi
vue3 vue.config.js配置路径别名
07-15
### 回答1： ...配置完vue.config.js后，保存文件并重新运行项目，就可以在Vue组件中使用路径别名了。例如，要引入src目录下的一个组件，可以这样写：`import Example from '@/components/Example';`
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值