Vue中關於圖片路徑配置的填坑日記

Vue項目中圖片存放位置

vue項目中可以有static和src/assets兩個文件夾存放圖片。

static中的圖片不會被打包，也不會被壓縮，一般來說存放的是第三方資源。而且vue-cli3中已經不存在static目錄。

雖然都可以放圖片，但建議項目資源文件統一存放在assets文件夾中。

 

部署后路徑訪問錯誤

本地訪問路徑：http://localhost:8080，部署到iis中一般需要增加虛擬目錄：http://oa.hopenchina.com:8086/yjjshop

這樣會導致少一級虛擬目錄，找不到路徑。

此時需要在config/index.js中 把assetsPushlicPath:"/" 修改成"./"

這樣路徑訪問就正常了。

 

圖片路徑設置

部署后，圖片可以正常通過相對路徑訪問

<img src="../assets/img/login/ewm_icon.png"/>

但對於背景圖片來說，沒有轉成base64的背景圖都失效了。（小圖會自動轉換成base64圖片，大圖不會）

.login-main{  
    width: 100%;
    height: 100vh;
    background: url(../assets/img/login/login_bg.jpg) no-repeat center center;
    background-size: 100% 100%;
}

網上推薦一種寫法，使用require引入圖片。經過測試可以解決問題，但這種寫法非常麻煩，而且只能用在行內元素中。

<div :style="{backgroundImage:'url('+require('assets/img/common/bg.png')+')'}"></div>

推薦處理方法：

build/unit.js 文件夾 generateLoaders方法中，增加下面配置：publicPath:'../../'

 這樣頁面中的相對路徑都不需要處理即可運行正常。

 

引申小技巧：

如果覺得相對路徑的寫法太麻煩，可以用~@/assets的方式代替。

.login-main{  
    width: 100%;
    height: 100vh;
    background: url(~@/assets/img/login/login_bg.jpg) no-repeat center center;
    background-size: 100% 100%;
}

~表示后面的值為 alias, 然后就會去 build/webpack.base.conf.js 的 alias 配置中找相應的值,

 @配置的地址是src。

~@/asset代表的就是src/asset