Vue进阶（四十五）：Vue中的import中@的作用

这是webpack的路径别名，相关代码定义在配置文件webpack.base.config里：

resolve: { // 自动补全的扩展名 extensions: ['.js', '.vue', '.json'], // 默认路径代理 // 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找 alias: { '@': resolve('src'), '@config': resolve('config'), 'vue$': 'vue/dist/vue.common.js' }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

其中resolve（）函数是文件里面自定义的函数：

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

  

 

  
1
  
2
  
3
 

我们也可以自定义路径：

   alias: { '@': resolve('src'), '@config': resolve('config'), 'vue$': 'vue/dist/vue.common.js'， '@components':path.join(__dirname, '..', 'src/components')//组件路径 }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

PS:里面的路径是针对当前文件的路径地址，而非引用文件的路径地址。

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/89306812