#VUE图片路径别名设置和图片的引用：

我们在使用vue书写代码是，引用静态图片路径的地址是经常发生一种业务场景，

每次写代码的时候都要“@//////”好多层，为了书写方便，在vue里可以给路径“@/assets/images”设置别名来节省输入代码的次数。

1、在项目根路径新建vue.config.js文件：

然后在文件里输入下面的代码：

let path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
    //*输入个格式
      .set('@',resolve('src'))
      //*给图片路径设置别名
      .set('img',resolve('src/assets/images'))
  }
}

2、重启编译器

3、在项目中使用别名（有坑）

①在template直接引入图片的时候：

如果想下面代码直接使用：

发现页面没有渲染图片，打开控制台发现字符串"img/[email protected]"没有得到解析：

1566538973(1).jpg

发现在template中需要这样写：

发现路径得到了解析：

1566539387(1).jpg

②在data里面赋值，然后动态获取图片的时候，图片路径必须要用require()包裹起来，代码如下：

enterpriseApp:[
            //*此处需要注意字符串"img/jiankong.png"中不需要加”~“
            {id:1,title:"监控",img:require("img/jiankong.png")},
            {id:2,title:"灰名单",img:require("img/huimingdan.png")},
            {id:3,title:"报告",img:require("img/baogao.png")},
            {id:4,title:"CRM",img:require("img/CRM.png")},
            {id:5,title:"评估",img:require("img/pinggu.png")},
        ],

页面渲染只需要vue的正常语法即可。

之后写项目的时候就可以愉快的使用别名，

简单快捷，省下了很多时间来保养头发~~~~