生產環境下的一些問題

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

比如，開發環境的url是：http://localhost:8080/static/img/122.png

而生產環境的url是：http://www.xxx.com/dist/static/img/122.png

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

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

解決方案：
webpack 是個優秀的打包工具，肯定有相關的配置的。
在build配置腳本中，就有相關配置項：　　

修改成如下圖

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

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

這樣在開發環境就訪問得到了。

可是在打包成生產環境還得再改一下，

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

?

轉載于:https://www.cnblogs.com/juewuzhe/p/7081881.html

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。