vue項目之webpack打包靜態資源路徑不准確

摘自：https://blog.csdn.net/viewyu12345/article/details/83187815

問題

1. 將打包好的項目部署到服務器，發現報錯說圖片找不到。
2. 靜態資源如js訪問不到

分析並且解決問題

明確一點的就是，看到報錯404，找不到靜態資源，很明顯，路徑錯誤了。

靜態資源找不到如js文件
資源打包路徑有誤，打包后的資源使用了絕對根目錄路徑，因此將項目部署到特定目錄下，其引入的資源路徑無法被正確解析。

解決：

找到config下面的index.js文件，將划線處改為如下樣子。

 

 

之前是根目錄，肯定找不到文件，我們改成相對目錄即可。打包后，去看看index.html中引入的文件就知道變化了。

圖片找不到
首先我們來看一下我們打包后生成的文件目錄：

 

 

 上面的報錯，要是沒有static/css就完全可以找到圖片了。但是為什么有的圖片能夠找得到有的圖片找不到呢，同樣的方法寫在css文件里面。這里我們就要了解一下webpack在打包我們的文件時候進行的操作了。

webpack打包limit限制

 

 

limit值為10000，表示字節。什么作用呢？就是小於這個字節限制的，不是不打包，而是轉化為base64（css樣式中，圖片的代碼變成了一堆字符）。大於的話就正常打包，加上7位hash值，就變成如下路徑。

 

 

跑到了img下面去了，img這個名字就是我們上面webpack配置的。這樣路徑就不對了，所以找不到圖片。

從源頭分析問題

在vue項目中，我們打包生成項目，跑命令如下。

npm run build

那么，我們就看看在執行這個命令中，運行的代碼，以此入手。找到config下面的index.js文件

 

 

打包后生成的文件代碼：

 

 

最開始，我們的assetsPublicPath值為'/'，表示根目錄，我們看看打包后的文件樣子。

 

 

這樣直接從根目錄獲取，我們將項目部署到服務器上都是有名字的，這樣直接到服務器根目錄肯定不能獲取。

解決圖片路徑錯誤辦法

在build文件夾下面找到utils.js文件，如下圖

 

 

新增紅色的部分，這樣打包的樣子就變成../../static的樣子了，就可以解決我們的問題。