Vue中文件引入路径的别名

当Vue的项目结构比较大的时候，引入文件及引入图片是一件比较棘手的事，如下:

比如当我们需要引入上上上级的图片时，需要这样:

当项目很大的时候，向这样引入是很麻烦的，所以我们可以利用起别名的方式来解决这个问题！

给路径起别名:

在Vue项目下的build/webpack.base.conf.js文件中定义别名,如下:

定义方式:

这里的@符表示src目录,当我们需要引入src目录下的img时，只需这样: <img src="@img"/>

示例:

本来引入上上上级img中的图片需要这样:

定义了别名后:

引入上上上级img中的图片只需要这样:

需要注意的是在dom中的话路径不能直接使用别名，需要在别名前加上 “~”