vue @ ~ 相对路径 路径别名设置
./
这是相对路径的意思,同级目录。
../
上级目录。
@/
这是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'
另外: 在组件中,我们会引用一些静态文件,即static下的文件, 这时我们就不能用上面这些相对路径了的配置了,而必须使用一般的路径方式方式。