Vue工程打包部署到服務器後,靜態文件(圖片)不顯示

問題描述:在自己工程裏打開Powershell窗口,運行npm run dev在本地瀏覽器打開http://localhost:8080/index.html------工程運行良好!但是npm run build時獲取打包文件dist並部署到服務器上後發現打開http://10.0.0.19/dist/index.html後某些靜態圖片顯示不出來…
也可以想象出,此類問題肯定是打包文件獲取問題------針對於如此,可做以下處理:
1.在config(文件夾)—>index.js中,添加(如圖的紅色標記區域)
在這裏插入圖片描述

2.在build(文件夾)—>utils.js添加
在這裏插入圖片描述
3.配置完成後,在工程裏靜態文件存儲又分爲兩種
(1).存放在assets中(的image文件夾):
img標籤引入圖片(請忽略 ’ )

<img’ src="…/…/assets/img/moon.png" class=“test-img” />
css圖片使用

background: url(’…/…/assets/img/moon.png’) no-repeat top left ;

(2)存放在static文件夾裏:
img標籤引入圖片(請忽略 ’ )

<img’ src="…/…/static/img/moon.png" class=“test-img” />

css圖片使用

background: url(’…/…/static/img/moon.png’) no-repeat top left ;

到此,可以解決目前我工程裏的問題,至於各位的,大家可以用來參考…

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章