一文解決 Vue打包后訪問圖片/圖標不顯示的問題

jzman 發布于2019-08-26 10:20 / 3958人閱讀

摘要：大家可否遇到過打包后，項目在線上運行時，資源文件圖片圖標不顯示的問題，接下來，我給大家分享一下我的解決方案檢查打包后中的文件打開此文件后你會頭暈，因為都是打包壓縮過的代碼，不過沒關系，關鍵字搜索檢查該路徑是否匹配正確對比后驚人發現因此在路徑

大家可否遇到過 npm run build 打包后，項目在線上運行時，資源文件(圖片、圖標)不顯示的問題，
接下來，我給大家分享一下我的解決方案~

1.檢查打包后dist中的css文件

打開此文件后你會頭暈，因為都是打包壓縮過的css代碼，不過沒關系，關鍵字搜索url

檢查該url路徑是否匹配正確
對比后驚人發現！！！

因此在url路徑前添加../../就OK了，但是很麻煩，每次打包后都要進行二次加工嗎？
并不是！！！

2.自動添加 ../../ 的方法
打開build/utils.js，檢測publicPath值是否正確，自己配置成相應的即可！

 if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: "vue-style-loader",
        publicPath: "../../"
      })
    } else {
      return ["vue-style-loader"].concat(loaders)
    }

配置好之后，npm run build打包后就會自動匹配正確的路徑，無需手動修改，
最終解決項目打包后圖片/圖標/字體不顯示的問題~

歡迎大家以后一起交流與學習~
這是我的個人微信

云服務器 GPU云服務器電腦不顯示圖標怎么解決訪問騰訊云服務器上的圖片不顯示訪問云服務器圖片不顯示訪問云服務器圖片不顯示不出來

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106005.html

Vue仿餓了么app項目總結

摘要：前言這是我第一個基于的項目作品，目的很簡單，學以致用，將之前的前端知識積累加上目前流行的前端框架，以項目的形式展現出來。即將屬性和請求返回數據對象合并到空對象，然后賦值給這里加上即提供了一種可擴展的機制，倘若原來的屬性中有預定義的其他屬性。前言這是我第一個基于 Vue 的項目作品，目的很簡單，學以致用，將之前的前端知識積累加上目前流行的前端框架，以項目的形式展現出來。源代碼：ht...

FrozenMap 2019-08-26 11:47 評論0 收藏0
vue-cli + webpack 多頁面實例配置優化方法

摘要：在谷歌找多頁面，實例還是比較少，功夫不負有心人，在那找到了，具體可以到這個，非常感謝童鞋，今天要講的內容是基于童鞋的多頁面實例上再優化的。有需要一起交流的可以加我的微信，，記得備注技術交流哈。 vue+webpack是否有多頁面目前使用vue來做項目，估計大部分都是單頁面（SPA）應用，一個輕型的 MVVM 框架，誰用了MVVM框架，就再也回不去JQ時代了，哈哈。在手機端的項目，使...

Taste 2019-08-20 10:36 評論0 收藏0
webpack4搭建Vue開發環境筆記~~持續更新

摘要：項目地址一知識獲取當前文件所在路徑，等同于把一個路徑或路徑片段的序列解析為一個絕對路徑給定的路徑的序列是從右往左被處理的，后面每個被依次解析，直到構造完成一個絕對路徑如果處理完全部給定的片段后還未生成一個絕對路徑，則當前工作目錄會被用上生成項目git地址一、node知識 __dirname: 獲取當前文件所在路徑，等同于path.dirname(__filename) consol...

hankkin 2019-08-23 13:01 評論0 收藏0
太急了點吧？貼吧PWA20天就出爐了

摘要：老司機開車從不需要理由喜歡我就來點我吧易杭貼吧新鮮出爐的中文社區前述最近一直在寫一個發貼子的應用，前不久才剛剛完工其實還有很多需要改進的地方。老司機開車從不需要理由喜歡我就來點我吧易杭貼吧--新鮮出爐的中文社區 http://tieba.freeedit.cn showImg(https://segmentfault.com/img/remote/146000000982...

王偉廷 2019-08-20 17:21 評論0 收藏0