对引用的文件起别名

Posted 2021-03-19 jjbw

在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">