資訊專欄INFORMATION COLUMN
摘要：情景使用打包前端應(yīng)用后，圖片和資源引用會出問題，這源于開發(fā)環(huán)境的目錄和生產(chǎn)環(huán)境的路徑不同比如，開發(fā)環(huán)境的是而生產(chǎn)環(huán)境的是其中是配置的生產(chǎn)環(huán)境路由。表示靜態(tài)文件打包后存放的子目錄，這個表示靜態(tài)資源部署后的公共路徑。
情景：
使用webpack 打包前端應(yīng)用后，圖片和css、js 資源引用會出問題，
這源于開發(fā)環(huán)境的目錄和生產(chǎn)環(huán)境的路徑【url】不同
比如，開發(fā)環(huán)境的url是：
http://localhost:8088/static/...
而生產(chǎn)環(huán)境的url是：
http://www.xxx.com/aaa/bbb/st...
其中【http://www.xxx.com/aaa/bbb/】是配置的生產(chǎn)環(huán)境路由。
指向express服務(wù)器。
二者區(qū)別，開發(fā)環(huán)境是放在域名的根目錄，所以不存在引用路徑變化的問題。
如果生產(chǎn)環(huán)境不做處理的話，圖片等靜態(tài)文件會自動在相對路徑前添加域名。
比如：
在樣式中寫到： background:url(abc.png) 這里會自動被轉(zhuǎn)化為： http://www.xxx.com/abc.png 然而，除非項目放在了域名根目錄下，一般情況這是路徑是不對的。
解決方案：
webpack 是個優(yōu)秀的打包工具，肯定有相關(guān)的配置的。
在build配置腳本中，就有相關(guān)配置項：
其中： index: path.resolve(__dirname, "../dist/index.html"),
表示，打包后的入口index.html文件存放的位置，這里表示，在dist目錄下。
assetsRoot: path.resolve(__dirname, "../dist")
表示，打包后埔靜態(tài)資源文件存放的根目錄，表示同樣是dist目錄。
assetsSubDirectory: "static",
表示靜態(tài)文件打包后存放的子目錄，"/static"
assetsPublicPath: "/",
這個表示靜態(tài)資源部署后的公共路徑。
假如應(yīng)用路徑是【http://www.xxx.com/aaa/bbb/】
那么這里就應(yīng)該配置為"/aaa/bbb/"
如果需要傳到cdn,則可以改成http://stacic.xxx.com/aaa/bbb/
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/82101.html
摘要：的生產(chǎn)環(huán)境優(yōu)化完整配置的可以參考本文主要介紹了生產(chǎn)環(huán)境我都做了哪些優(yōu)化文章的結(jié)構(gòu)如下靜態(tài)資源路徑。分配不同的關(guān)于穩(wěn)定性的坑注意區(qū)分整個項目有變動時，變化。而生產(chǎn)環(huán)境可以這一項，因為我們不需要在生產(chǎn)環(huán)境調(diào)試代碼。 webpack4 的生產(chǎn)環(huán)境優(yōu)化 webpack4完整配置的可以參考： https://github.com/ziwei3749/... 本文主要介紹了 webpack4 生產(chǎn)...
摘要：瀏覽器緩存簡單介紹下面來簡單介紹一下瀏覽器緩存，以及為何我要在標(biāo)題中強調(diào)該去則去，該留則留。但后來我還是反轉(zhuǎn)了自己，這種方法雖然能留下瀏覽器緩存，卻做不到該去則去。 本文首發(fā)于Array_Huang的技術(shù)博客——實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000010317802如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里：h...
摘要：瀏覽器緩存簡單介紹下面來簡單介紹一下瀏覽器緩存，以及為何我要在標(biāo)題中強調(diào)該去則去，該留則留。但后來我還是反轉(zhuǎn)了自己，這種方法雖然能留下瀏覽器緩存，卻做不到該去則去。 本文首發(fā)于Array_Huang的技術(shù)博客——實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000010317802如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里：h...
摘要：博主最近在學(xué)習(xí)，順便搭建了一個基于的前端項目架構(gòu)在此寫文記錄一下，同時教會新入坑的小伙伴們?nèi)绾卧陧椖恐型媾~玩轉(zhuǎn)。所以開發(fā)環(huán)境中會有一個目錄用于我們開發(fā)還有一個用來存儲處理后的的模板文件。 博主最近在學(xué)習(xí)react redux，順便搭建了一個基于webpack的前端項目架構(gòu),在此寫文記錄一下，同時教會新入webpack坑的小伙伴們?nèi)绾卧陧椖恐型媾?，額！玩轉(zhuǎn)webpack。github...
閱讀 2406·2021-09-28 09:45
閱讀 3650·2021-09-24 09:48
閱讀 2325·2021-09-22 15:49
閱讀 3177·2021-09-08 16:10
閱讀 1657·2019-08-30 15:54
閱讀 2394·2019-08-30 15:53
閱讀 3078·2019-08-29 18:42
閱讀 2926·2019-08-29 16:19
