1. 程式人生 > >vue-cli webpack打包後加載資源的路徑問題

vue-cli webpack打包後加載資源的路徑問題

vue專案,訪問打包後的專案,輸入路徑後,頁面載入空白。這時會有兩類問題,都是路徑問題

1.一個是css,js,ico等檔案載入不到,是目錄裡少了dist

開啟頁面時一片空白

解決辦法:

config/index.js檔案的build->assetsPublicPath的預設值改為 './'

assetsPublicPath:資源的根目錄。這個是通過http伺服器執行的url路徑。因為webapp和static中間還有層dist,所以要用'./'

2.另一個就是單純的在背景圖使用相對路徑導致載入不到圖片

例如登入頁面的背景圖設定

我的目錄結構是這樣的,

頁的時候沒發使用@/../static   只能使用../../../static

這個時候,打包過後的登陸頁面引用圖片路徑錯誤,多了一個/static/css

解決辦法:

build/utils.js檔案的ExtractTextPlugin.extract=>新增 publicPath:"../../"

publicPath:重寫該載入器(loader) css 的 publicPath 的設定