Vue-cli項目打包好後遇見的問題

來自專欄 閃電狗

問題1：使用Vue-cli項目中npm run build打包成功後，部署到伺服器上index頁面為空。

問題原因：打包後生成的dist文件跟開發環境中的項目文件下的目錄結構不同，導致引入靜態資源文件的路徑有問題。

解決辦法：在項目的config文件夾下的index.js文件裡面

找到build下assetsPublicPath:/，將其改成assetsPublicPath:./。

再重新打包一次，此時index頁面裡面的就能順利載入出樣式了，但可能圖片路徑有錯誤。

-----------------------------------------------------------------------------------------------

問題2：css樣式出來了，圖片和背景圖片路徑又有問題，顯示不出來。

問題原因：打包後的文件目錄結構和開發環境中的文件目錄結構不一樣。

解決辦法：如果圖片放在static目錄下面

將img標籤src引入的圖片路徑寫為：

就解決了。

背景圖片在組件的css中引用路徑為

打包後會找不到這個文件

在bulid目錄下utils.js文件

里找到

將代碼加入進去在打包就OK了;