vue @ ~ 相对路径 路径别名设置

36 篇文章 2 订阅

./这是相对路径的意思,同级目录。
../上级目录。
@/这是webpack设置的路径别名。在build/webpack.base.conf这个文件里面设置了@具体指的是什么

build/webpack.base.conf里找到如下

resolve: {
    extensions: ['.js', '.vue', '.json'],//取消后缀  引入文件路径就不用加文件后缀了
    alias: {
      'vue$': 'vue/dist/vue.esm.js', //引入vue
      '@': resolve('src'),
      'asd': resolve('src/components/children'), //自己新建 要从src开始写文件路径
    }
  },

使用 import heads from '@/components/children/heads'就不用频繁的使用./../了,而是利用@直接定位到了src目录。
或者 import heads from 'asd/heads'

但是引入assets中的文件时要这么操作啊:~@/assets/index/icon.png


另外: 在组件中,我们会引用一些静态文件,即static下的文件, 这时我们就不能用上面这些相对路径了的配置了,而必须使用一般的路径方式方式。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值