开发中经常会写这样的代码

<img src="../../../assets/img/home/test.jpg"/>

这就带来一个问题，有时候我们可能会记错文件的层级关系

导致多写或者少写 “../” 如何解决这种困扰呢？

这个时候就可以用路径别名来解决了

在你的项目根目录下新建 vue.config.js，在里面写上这样的代码

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets'
      }
    }
  }
}

之后你引入图片的时候只需要这样做

<img src="~assets/img/home/test.jpg"/>

不用去管assets前面有多少个“点点斜杠”，直接用~号代替即可。

               

作者