在使用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')
