生產(chǎn)環(huán)境下的一些問題

使用webpack 打包前端應用后，圖片和css、js 資源引用會出問題，
這源于開發(fā)環(huán)境的目錄和生產(chǎn)環(huán)境的路徑【url】不同

比如，開發(fā)環(huán)境的url是：http://localhost:8080/static/img/122.png

而生產(chǎn)環(huán)境的url是：http://www.xxx.com/dist/static/img/122.png

二者區(qū)別，開發(fā)環(huán)境是放在域名的根目錄，所以不存在引用路徑變化的問題。
如果生產(chǎn)環(huán)境不做處理的話，圖片等靜態(tài)文件會自動在相對路徑前添加域名。
比如：

在樣式中： background:url(123.png) 這里會自動被轉(zhuǎn)化為： http://www.xxx.com/123.png 然而，除非項目放在了域名根目錄下，一般情況這路徑是不對的。因為有可能會有多個項目同在，所以一般不會直接放在根目錄下。

解決方案：
webpack 是個優(yōu)秀的打包工具，肯定有相關(guān)的配置的。
在build配置腳本中，就有相關(guān)配置項：　　

修改成如下圖

然而這樣修改后，還是有點小問題，如下圖：

這樣的圖片路徑是訪問不到的，需要新建static文件夾

這樣在開發(fā)環(huán)境就訪問得到了。

可是在打包成生產(chǎn)環(huán)境還得再改一下，

這樣有點不是很合理，2種環(huán)境不能同時兼容，暫時還沒找到更好的辦法。

?

轉(zhuǎn)載于:https://www.cnblogs.com/juewuzhe/p/7081881.html

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的vue,一路走来（10）--生产环境的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。