在使用webpack打包的時(shí)候發(fā)現(xiàn)有一些圖片在打包之后，404看不到了

問(wèn)題

在我的vue項(xiàng)目中，測(cè)試環(huán)境下圖片可以顯示出來(lái)，但是到生產(chǎn)環(huán)境下我的圖片就沒(méi)了

dev測(cè)試中

打包之后

控制臺(tái)報(bào)404錯(cuò)誤

結(jié)果發(fā)現(xiàn)問(wèn)題在打包之后的文件夾中沒(méi)有我需要的一些圖片。

原因

導(dǎo)致這個(gè)問(wèn)題的原因是，我在項(xiàng)目中對(duì)圖片的調(diào)用使用了字符串拼接的模式

這個(gè)url只有在頁(yè)面加載出來(lái)的時(shí)候才會(huì)去讀取。
在dev環(huán)境中，我設(shè)置了默認(rèn)對(duì)一些靜態(tài)文件的放置，所以可以看到

但是到了生產(chǎn)環(huán)境。webpack的打包原理是

而我的url是拼接的，打包的時(shí)候后面的參數(shù)還沒(méi)識(shí)別出來(lái)，所以無(wú)法打包對(duì)應(yīng)的文件。在生產(chǎn)環(huán)境中當(dāng)然無(wú)法看到對(duì)應(yīng)的文件了。

解決辦法

強(qiáng)行打包。
在項(xiàng)目中裝shelljs，使文件中可以使用linux命令

 cnpm i shelljs --save-dev

生產(chǎn)環(huán)境的進(jìn)入口，可以在packge.json中看到

引用shelljs

image.png

在打包完成后，執(zhí)行l(wèi)inux命令，將我們的文件夾復(fù)制到正確的位置

cp('-R', 'src/assets/img', webpackConfig.output.path + '/static')