一般在vue項目當中造虎，都有一個vue.config.js惦费，一個可選的配置文件，之前總是再用冰抢，但對于其中的配置項具體的用途了解少之又少，所以準備對此文件常用的配置項或webpack插件做一下記錄艘狭。
今天來說說publicPath字段的用途
image.png
官網上的描述如下圖所述挎扰，萌新看著可能比較懵。
image.png
光說不練巢音，沒什么意思遵倦。將publicPath改為/app重啟試一試。
可看到如下:項目首頁路徑:從http://localhost:1024/#/index變?yōu)?http://localhost:1024/app/#/index（注意'/app'）
image.png
然后我們來打個包生成dist文件夾：可看到目錄結如下所示
image.png
將dist目錄作為項目根目錄港谊，用live-server(一個本地小型服務器插件)啟動dist下打包后的代碼骇吭，可發(fā)現(xiàn)項目啟動白板，因為訪問靜態(tài)資源文件都是404歧寺；
image.png
從上面可以得知燥狰，靜態(tài)資源文件都是在app下的棘脐，所以在dist下新增添一個app目錄，把dist下文件放到app下龙致，相當于一個文件的路徑蛀缝，可以發(fā)現(xiàn)項目會正常啟動。一般nginx都會配置一個靜態(tài)資源目錄目代，打包后的文件都會放到這個靜態(tài)資源目錄里面屈梁，nginx去做映射，所以publicPath這個屬性基本不用改榛了。'/'就行在讶。
結論：publicPath配置成'/aaa/bbb/ccc'， 則需在相應的服務器路徑中新建aaa>bbb>ccc的文件夾霜大，然后將打包后的文件放進去构哺。就ok拉。
image.png
