巧設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以下：

https://www.baidu.com/a.js
https://www.baidu.com/b.css
https://www.baidu.com/c.png

這些請求統統報錯404 Not found

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

https://www.baidu.com/yunpan/...
https://www.baidu.com/yunpan/...
https://www.baidu.com/yunpan/...

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/'便可。