vue專案之webpack打包靜態資源路徑不準確
文章有點長，希望能夠閱讀下去，有所幫助。
問題
- 將打包好的專案部署到伺服器，發現報錯說圖片找不到。
- 靜態資源如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的樣子了，就可以解決我們的問題。
一起交流學習吧~~