巧設publicPath,優雅適配生產環境要求

使用vue或者angular 2的同學肯定離不開webpack，vue-cli等配置構建工具的出現，更是解放了開發者不少的負擔。

1. vue-cli對靜態資源的默認行為

vue-cli默認將生產環境的靜態資源放在dist目錄下，html載入js、css或者css載入png或者svg等靜態資源時通常以dist目錄為根目錄，使用絕對路徑進行載入。

2. 實際遇到的問題

但是大多數app靜態資源並不會直接放到伺服器根目錄（以www.baidu.com為例），而是放在二級或者三級目錄下，如www.baidu.com/yunpan,這樣上面默認的配置將會導致載入不到對應靜態資源，打開Chrome Devtools會發現，下載js、css、png的url如下：

這些請求通通報錯404 Not found

多動手試一下，發現以下url的響應會是200 OK，得到實際需要的靜態資源

3. 原因以及解決方案

url-loader根據options的name屬性將靜態資源放置到對應目錄，同時對html或者css引用靜態資源的url進行修改，這也是vue-loader推薦大家自由放置靜態資源而不用關心生產環境url指向的原因。

但是遇到app部署到網站二級目錄的特殊場景，就自然而然地出現上面的問題。有人推薦修改/config/index.js中的config.build.assetsPublicPath為"",嘗試後發現只能修正html引用js、css的問題，不能修正css引用image、iconfont等靜態資源的問題。

實際上，你無須改變config.build.assetsPublicPath，只需要在/build/webpack.prod.conf.js中output增加publicPath，將其置為"/yunpan/"即可。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！