#VUE图片路径别名设置和图片的引用：
2019-08-23 本文已影响38人
Lee_Han_
我们在使用vue书写代码是，引用静态图片路径的地址是经常发生一种业务场景，
<img src="@/assets/images/red@2x.png" alt="">
每次写代码的时候都要“@//////”好多层，为了书写方便，在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 src="img/tip-red@2x.png" alt="">
发现页面没有渲染图片，打开控制台发现字符串"img/tip-red@2x.png"没有得到解析：
1566538973(1).jpg
发现在template中需要这样写：
<img src="~img/tip-red@2x.png" alt="">
发现路径得到了解析：
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的正常语法即可。
<img :src="item.img" alt="">
之后写项目的时候就可以愉快的使用别名，
