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的樣子了，就能夠解決咱們的問題。