我們在使用vue書寫代碼是，引用靜態(tài)圖片路徑的地址是經常發(fā)生一種業(yè)務場景裹唆，
<img src="@/assets/images/red@2x.png" alt="">
每次寫代碼的時候都要“@//////”好多層，為了書寫方便，在vue里可以給路徑“@/assets/images”設置別名來節(jié)省輸入代碼的次數(shù)舍咖。
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="">
發(fā)現(xiàn)頁面沒有渲染圖片，打開控制臺發(fā)現(xiàn)字符串"img/tip-red@2x.png"沒有得到解析：
1566538973(1).jpg
發(fā)現(xiàn)在template中需要這樣寫：
<img src="~img/tip-red@2x.png" alt="">
發(fā)現(xiàn)路徑得到了解析：
1566539387(1).jpg
②在data里面賦值民轴，然后動態(tài)獲取圖片的時候攻柠，圖片路徑必須要用require()包裹起來，代碼如下：
enterpriseApp:[
//*此處需要注意字符串"img/jiankong.png"中不需要加”~“
{id:1,title:"監(jiān)控",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="">
之后寫項目的時候就可以愉快的使用別名瑰钮，
