背景

使用vue3+vite開發(fā)的時候，導入svg圖片時，同一個文件夾下的文件，其中一個路徑正常解析，另一個不行。更改文件名之后，該圖片文件就可以正常解析了。出現(xiàn)這個問題的時候感覺一臉懵逼，在使用webpack開發(fā)的時候并沒有出現(xiàn)過這種現(xiàn)象，找了很久問題，終于解決了，特此記錄一下。

項目配置：vue："^3.2.38"； vite："^3.0.9"

問題復現(xiàn)

左邊為引入路徑

右邊為瀏覽器解析路徑

可以看出：對于logo.svg圖片的路徑，vite解析為了/@fs/src/assets/img/logo.svg, 這顯然是有問題的

于是我查看了一下vite.config.ts

vite.config.ts

部分相關(guān)代碼如下：

import { fileURLToPath, URL } from 'node:url'

// defineConfig 中配置的路徑別名
resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }

經(jīng)過檢查發(fā)現(xiàn)，配置的路徑別名并沒有什么問題，那是為什么呢？

問題排查

路徑中的@fs

在Vite中，@fs 是一個內(nèi)部使用的特殊前綴，它指示Vite從文件系統(tǒng)中直接提供資源。這個前綴通常在開發(fā)過程中由Vite自動添加到模塊的路徑中，以區(qū)分模塊請求和普通的靜態(tài)資源請求。

當在Vite項目中看到一個路徑包含 @fs，這意味著：

• 文件系統(tǒng)訪問：Vite正在告訴其內(nèi)部服務(wù)器，該資源應(yīng)該直接從文件系統(tǒng)中提供，而不是作為一個模塊或者通過其他方式處理。

• 絕對路徑：@fs 通常與文件的絕對路徑一起使用，這樣Vite就可以準確地定位到文件系統(tǒng)中的資源位置。

在正常情況下，開發(fā)者不需要直接使用或關(guān)心 `@fs` 前綴。它是Vite內(nèi)部處理資源時的一個實現(xiàn)細節(jié)。如果你在開發(fā)過程中遇到了包含 `@fs` 的路徑，這可能是由于Vite的某些內(nèi)部邏輯或者配置導致的。通常，這不應(yīng)該影響資源的加載，因為Vite知道如何處理這些路徑。

vite的緩存問題

當排查了文件問題之后，那最有可能的就是開發(fā)服務(wù)器的緩存導致的問題

解決緩存：

1. 重啟Vite開發(fā)服務(wù)器
2. 清除所有緩存（刪除 `node_modules/.vite` 目錄）

node_modules/.vite

node_modules/.vite 目錄是Vite在開發(fā)模式下自動生成的一個緩存目錄。Vite是一個構(gòu)建工具，它使用這個緩存目錄來存儲預(yù)優(yōu)化的依賴項和其他緩存數(shù)據(jù)，以加快開發(fā)服務(wù)器的啟動速度和模塊的熱重載（HMR）速度。

在這個目錄中，你可能會找到以下內(nèi)容：

• 優(yōu)化的依賴模塊： Vite會預(yù)處理node_modules中的第三方依賴，將它們轉(zhuǎn)換為ES模塊格式，并存儲在.vite目錄中。這樣，瀏覽器可以直接加載這些模塊，而不需要額外的打包步驟。

• 源碼映射（Source Maps）： 對于預(yù)處理的依賴，Vite還會生成源碼映射，以便在開發(fā)者工具中提供更好的調(diào)試體驗。

• HMR狀態(tài)： 熱模塊替換（HMR）相關(guān)的狀態(tài)信息也可能存儲在這個目錄中，以便在模塊更新時快速應(yīng)用更改。

• 其他緩存數(shù)據(jù)： Vite可能會緩存一些其他數(shù)據(jù)，比如插件生成的臨時文件，以加快構(gòu)建和開發(fā)過程。

Vite對這個目錄的處理主要包括：

• 生成和更新緩存： 在開發(fā)模式下，當你第一次啟動Vite服務(wù)器時，它會檢查node_modules中的依賴，并生成優(yōu)化后的版本存儲在.vite目錄。如果依賴項有更新，Vite會重新生成緩存。

• 讀取緩存： 在后續(xù)的開發(fā)服務(wù)器啟動中，Vite會讀取這些緩存數(shù)據(jù)，以避免重新優(yōu)化依賴項，從而加快啟動速度。

• 清理緩存： 如果你的依賴項發(fā)生變化，或者你手動更新了Vite的版本，有時候你可能需要清理這個緩存目錄，以確保Vite使用最新的依賴項和配置。你可以通過刪除.vite目錄或者使用Vite提供的命令（如vite --force）來強制Vite重新生成緩存。

總的來說，node_modules/.vite目錄是Vite用來提高開發(fā)效率的一個實現(xiàn)細節(jié)，通常你不需要手動干預(yù)這個目錄。如果遇到緩存相關(guān)的問題，通常只需要刪除這個目錄，然后重新啟動Vite開發(fā)服務(wù)器即可。

解決

刪除node_modules/.vite文件，重啟本地服務(wù)器

題外話

webpack對于文件的緩存

Webpack的緩存機制： Webpack是一個模塊打包工具，它通過一系列的加載器和插件來處理項目中的各種資源，如JavaScript、CSS、圖片等。Webpack在構(gòu)建過程中也會使用緩存來提高性能。例如，Webpack可以緩存模塊的轉(zhuǎn)換結(jié)果，以便在下次構(gòu)建時如果模塊沒有變化，就可以直接使用緩存的結(jié)果，而不需要重新執(zhí)行昂貴的構(gòu)建步驟。

Webpack的緩存通常存儲在內(nèi)存中，但也可以配置為存儲在文件系統(tǒng)中。在Webpack 5中，引入了持久化緩存，可以將緩存數(shù)據(jù)存儲在文件系統(tǒng)中，這通常通過配置cache選項來實現(xiàn)。

為什么使用緩存： 無論是Vite還是Webpack，使用緩存的主要目的都是為了提高構(gòu)建和重構(gòu)建的速度。緩存可以減少不必要的計算，避免重復執(zhí)行相同的任務(wù)，從而為開發(fā)者提供更快的反饋循環(huán)。

在Webpack中，緩存可以配置為存儲在內(nèi)存中或者文件系統(tǒng)中。默認情況下，Webpack的緩存是存儲在內(nèi)存中的，這意味著緩存只在Webpack的構(gòu)建會話期間存在，當Webpack進程結(jié)束時，緩存也會消失。

從Webpack 5開始，引入了持久化緩存，允許將緩存數(shù)據(jù)存儲在文件系統(tǒng)中，這樣即使在重新啟動Webpack構(gòu)建后，緩存數(shù)據(jù)也可以被重用。當你配置Webpack使用文件系統(tǒng)緩存時，你可以指定緩存的存儲位置。

以下是一個Webpack 5中配置文件系統(tǒng)緩存的例子：

// webpack.config.js
module.exports = {
  // ...
  cache: {
    type: 'filesystem', // 使用文件系統(tǒng)緩存
    cacheDirectory: path.resolve(__dirname, '.temp_cache'), // 指定緩存目錄
    buildDependencies: {
      config: [__filename], // 當配置文件變更時，緩存失效
    },
  },
  // ...
};

在這個配置中，cacheDirectory 選項用于指定緩存存儲的目錄。如果你沒有指定 cacheDirectory，Webpack將使用默認的緩存目錄，通常是在 node_modules/.cache/webpack 目錄下，這個目錄位于你的項目目錄中。

持久化緩存可以顯著提高構(gòu)建性能，特別是在大型項目中，因為它避免了在每次構(gòu)建時重新處理模塊。然而，需要注意的是，當項目的依賴或配置發(fā)生變化時，可能需要清除緩存以確保構(gòu)建的正確性。

以上就是使用vue3+vite導入圖片路徑錯亂問題排查及解決的詳細內(nèi)容，更多關(guān)于vue3+vite導入圖片路徑錯亂的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論