vue項目打包後css背景圖路徑不對的問題

問題描述：

本身在自學vue作項目的過程當中，遇到一個有關背景圖片路徑的問題，就是css代碼中背景圖片是根據相對路徑來寫的，以下圖：

當使用npm run dev命令本地訪問的時候，背景圖片是正常顯示的，可以使用npm run build命令打包後，訪問dist目錄下的項目，頁面背景圖路徑就不對了，顯示不出背景圖。以下兩張圖對比

圖一：使用npm run dev命令訪問

 

圖二：使用npm run build命令打包以後，訪問dist目錄下的文件，出現的問題，背景圖片路徑變成了http://127.0.0.1:9000/static/css/static/img/login-bg.0271ef1.jpeg，而實際在dist目錄下，圖片路徑是這樣的，以下圖

 

解決辦法：

解決辦法爲：只須要在build/utils.js文件中添加以下一行代碼便可。

publicPath:'../../'

添加位置爲以下圖：

 

而後從新執行 npm run build 命令，便可成功顯示圖片