1. 程式人生 > >vue+webpack打包路徑問題

vue+webpack打包路徑問題

最近寫了一個vue小專案,不想單獨作為一個web專案釋出,所以就準備放到資源專案的public資料夾下,遇到一些小問題,在此總結一下。

資源路徑如下:

這裡寫圖片描述

public目錄配置的訪問路徑為”/”,在這樣的情況下,我們的訪問路徑就變成了”域名/vue-demo”。訪問的時候發下程式未報錯,但是頁面一片空白。此前也這樣釋出的專案都沒有問題,但這次是怎麼回事呢?

仔細探索後發現是vue-router搞得鬼。因專案需要,所以使用了滾動行為,滾動行為必須開啟history模式,在vue-router官方文件中有這麼一句話:

不過這種模式要玩好,還需要後臺配置支援。因為我們的應用是個單頁客戶端應用,如果後臺沒有正確的配置,當用戶在瀏覽器直接訪問

http://oursite.com/user/id 就會返回 404,這就不好看了。

所以呢,你要在服務端增加一個覆蓋所有情況的候選資源:如果 URL 匹配不到任何靜態資源,則應該返回同一個 index.html 頁面,這個頁面就是你 app 依賴的頁面。

而我們vue-router監聽的路徑還是”/”與”/component”,自然路徑匹配不上。

所以我們需要修改routes,給每個path加上專案名,即”/vue-demo”,同時為了保證資原始檔正確載入,打包時的 publicPath 也需要加上”/vue-demo”。

完畢!!