在webpack.base.conf.js中存在一个resolve的属性:其中alias是别名的意思,可以在这一项中为对应的文件夹起别名
resolve: {
extensions:['.js', '.vue', '.json'],
alias: {
'@':resolve('src'),
'assets':resolve('src/assets'),
'components':resolve('src/components'),
'router':resolve('src/router'),
'views':resolve('src/views')
}
}
在使用import方法引用时,直接使用别名即可:
import TabBar from 'components/tabbar/TabBar.vue'
在图片中引用时:需要在引用的别名前使用~
<img src="~assets/img/tabbar/home.svg">