vue項目打包以後圖片/字體路徑404

vue項目在打包以後 static 中圖片路徑不對

問題緣由：在把vue項目打包以後提交到github上 在github pages查看頁面的時候發現圖片加載
不出來，控制檯顯示圖片 404 。

查看圖片路徑時發現404的地址：
https://xxx.github.io/dist/static/css/static/img/xxx.jpg
正確路徑應該爲：
https://xxx.github.io/dist/static/img/xxx.jpg

很明顯錯誤的緣由是 404 的路徑中多了 /static/css
複製代碼

解決辦法

首先個人項目若是部署在根目錄，是不會出現 404 路徑不對的緣由，由於部署在根目錄，資源文件
都是放在 static 中的，引用路徑都是 /static/images/xxx.jpg

若是部署在子目錄，就有可能出現上面說的這個問題（打包以後圖片路徑不對）

一、首先要修改的地方是 config/index.js 這個文件
   須要將 assetsPublicPath: '/' 改成 assetsPublicPath: './'
   （這個修改若是你跟我同樣，把項目放到 github 上並在 github pages 展現，那麼會遇到頁面
   空白的問題，那麼解決這個問題的辦法就是上述修改辦法）
二、而後你項目中引用圖片的時候須要使用相對路徑的形式。
三、咱們用了相對路徑，但vue在打包的時候會把css抽離出來爲一個單獨的css文件，那麼這 時候
   相對路徑改變了，全部咱們就須要修改 build/utils.js 文件
   在utils.js中新增一個 publicPath 配置
   publicPath:'../../'
複製代碼

這樣配置完就能夠解決 vue項目 打包以後資源路徑的問題了。
複製代碼