資源相對引用路徑

問題描述

一般情況下，通過webpack+vuecli預設打包的css、js等資源，路徑都是絕對的。

但當部署到帶有資料夾的專案中，這種絕對路徑就會出現問題，因為把配置的static資料夾當成了根路徑，那麼要解決這種問題，就得引用相對路徑。

解決辦法

開啟webpack.prod.conf.js

找到output：增加 publicPath: './', 即可，如圖。

那麼這樣後，資源的引用路徑就正確了。

當然在config資料夾下的index.js中修改 assetsPublicPath: './'同樣也可以達到資源的相對引用。

背景圖片的引用問題

上面雖然解決了資源路徑的引用問題，但是資源裡面的背景圖片，不像index.html中載入資源一樣，通過./static/js/app.js

url(../../static/img/logo-index.2f00bf2.png) no-repeat

那麼就需要修改build資料夾下的utils.js程式碼，如圖所示：

新增如圖所示的一行程式碼，這樣不論是字型還是圖片的引用問題都能解決。