鍍金池/ 問(wèn)答/HTML/ vue-cli腳手架npm run build打包后圖片路徑問(wèn)題

vue-cli腳手架npm run build打包后圖片路徑問(wèn)題

我打包用vue-cli腳手架寫的項(xiàng)目，npm run build打包后，發(fā)現(xiàn)圖片全部都顯示不出來(lái)，路徑有問(wèn)題。下圖是我的文件目錄：

clipboard.png

 webpack的配置無(wú)論是改成""、"./"、"/"還是"/dist/"都沒(méi)有效果，下圖是webpack的配置

clipboard.png

下圖是我圖片路徑的寫法

clipboard.png

 打包后圖片報(bào)的錯(cuò)誤為：

clipboard.png

想請(qǐng)問(wèn)下，是哪里沒(méi)有出現(xiàn)問(wèn)題了嗎？
回答
編輯回答
帥到炸

publicPath: '/'

2017年6月11日 08:07
編輯回答
吢涼

你應(yīng)該是直接用瀏覽器打開(kāi)打包后的index.html文件吧，這樣的話斜杠開(kāi)頭的路徑肯定找不到。。。
部署到服務(wù)器應(yīng)該就沒(méi)問(wèn)題了。

可以在圖片路徑前面加個(gè)點(diǎn)，這樣應(yīng)該也能打開(kāi)

{"img":"./static/imgs/m2.png"}
2017年12月9日 19:39
編輯回答
清夢(mèng)

在服務(wù)器環(huán)境下打開(kāi)

2017年5月30日 10:18
編輯回答
夢(mèng)一場(chǎng)

按照你目前出錯(cuò)的路徑，想要訪問(wèn)圖片，應(yīng)該以dist作為根目錄，啟動(dòng)一個(gè)web服務(wù)，這樣http協(xié)議就能訪問(wèn)到你的圖片，而不是用file協(xié)議。
如果你真的想使用file協(xié)議訪的話，你只要修改圖片路徑為相對(duì)路徑就可以了。
至于你問(wèn)題中說(shuō)的修改的webpack那幾個(gè)路徑配置，這個(gè)是針對(duì)webpack vue模板中相對(duì)路徑或模塊化引入的文件才會(huì)起作用，以絕對(duì)路徑方式引入腳手架是不會(huì)處理的。
參考說(shuō)明
http://vuejs-templates.github...

2017年3月31日 01:53