一般在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ā)現項目啟動白板，因為訪問靜態(tài)資源文件都是404；

image.png

從上面可以得知，靜態(tài)資源文件都是在app下的，所以在dist下新增添一個app目錄，把dist下文件放到app下，相當于一個文件的路徑，可以發(fā)現項目會正常啟動。一般nginx都會配置一個靜態(tài)資源目錄，打包后的文件都會放到這個靜態(tài)資源目錄里面，nginx去做映射，所以publicPath這個屬性基本不用改。'/'就行。

結論：publicPath配置成'/aaa/bbb/ccc'， 則需在相應的服務器路徑中新建aaa>bbb>ccc的文件夾，然后將打包后的文件放進去。就ok拉。

image.png