vue-cli3打包之後圖片路徑不對

隨著前端技術的不斷發展，各種框架和工具也不斷湧現，在這個大浪淘沙的時代，Vue.js 無疑是一個不可忽視的存在。然而，隨著 Vue.js 日益普及，我們也會遇到一些問題。本文將介紹使用 vue-cli3 打包專案時，遇到圖片路徑錯誤的問題，並提供一些解決方案。

問題描述

在使用 vue-cli3 進行專案開發時，我們通常可以使用 img 標籤來引入圖片。例如：

<img src="./assets/img/logo.png" alt="logo" />

這裡假設 logo.png 圖片位於專案的 assets 目錄下。在執行 npm run serve 指令時，該圖片可以正確顯示。但是，當我們運行npm run build 命令進行打包後，我們訪問打包後的頁面卻發現圖片無法正常顯示，透過瀏覽器的開發者工具，我們可以發現其實圖片載入失敗了，並且控制台給出瞭如下錯誤訊息：

http://your-domain.com/img/logo.4aebf758.png 404 (Not Found)

這裡的http://your-domain.com 是指打包後專案的根目錄路徑。

造成這個問題的原因

我們知道，Vue.js 基於元件化的開發模式，一般情況下，每個元件都是單獨的文件，包括HTML 模板、CSS 樣式、JavaScript 程式碼等。在 Vue.js 的開發過程中，我們通常會使用 webpack 打包工具來進行建置打包。由於webpack 檔案打包的機制，它會將每個元件所需的所有資源打包到對應的JavaScript 檔案中，而瀏覽器只能透過HTTP 請求取得到靜態資源，因此webpack 打包時會將資源檔案（包括圖片）的路徑轉換為HTTP 請求路徑。

換句話說，當我們使用相對路徑來引用資源檔案時，在專案運行時該圖片會在http://localhost:8080 根目錄下搜索，而在打包時，圖片的路徑已經被webpack 打包為新的路徑，並放在了根目錄下的img 目錄下。因此，我們在使用 webpack 打包後的檔案時，需要針對路徑進行修改。

解決方案

修改靜態資源根路徑

我們可以透過修改vue.config.js 中publicPath 欄位的值來替換根路徑，從而解決路徑錯誤的問題。

首先，在專案根目錄中新建vue.config.js 文件，並輸入如下程式碼：

module.exports = {
  publicPath: './'
}

這裡的publicPath 實際上就是設定了打包後的靜態資源存放路徑，上述程式碼表示靜態資源和index.html 存放在同一個目錄下。

使用絕對路徑引用圖片

除了透過修改publicPath 來解決問題，我們還可以直接使用絕對路徑來引用圖片，這樣就避免了由相對路徑帶來的問題。例如：

<img src="/img/logo.4aebf758.png" alt="logo" />

這裡的 / 表示專案根路徑，透過此方式引用的圖片不會受相對路徑的影響。

將圖片檔案放置在公共目錄下

我們也可以將圖片檔案放置在/public 目錄下，這個目錄下的檔案不會被webpack 打包，而是直接複製到打包後的目錄下。這樣我們就可以直接使用相對路徑來引用這些圖片了。

總結

不管是透過修改路徑還是使用絕對路徑引用圖片，解決方法都比較簡單。在實際開發中，為了減少路徑錯誤的問題，我們可以在開發時養成好習慣，盡量使用絕對路徑或將圖片放置在公共目錄下。這樣不僅便於調試和維護，也可減少打包後的路徑錯誤問題。希望本文對您有幫助。

以上是vue-cli3打包之後圖片路徑不對的詳細內容。更多資訊請關注PHP中文網其他相關文章！