快捷導(dǎo)航

使用vue3+vite導(dǎo)入圖片路徑錯(cuò)亂問題排查及解決

更新時(shí)間：2024年03月06日 10:52:36 作者：某哈壓力大

使用vue3+vite開發(fā)的時(shí)候,導(dǎo)入svg圖片時(shí),同一個(gè)文件夾下的文件,其中一個(gè)路徑正常解析,另一個(gè)不行,更改文件名之后,該圖片文件就可以正常解析了,本文給大家介紹了使用vue3+vite導(dǎo)入圖片路徑錯(cuò)亂問題排查及解決,需要的朋友可以參考下

背景

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

項(xiàng)目配置：vue："^3.2.38"； vite："^3.0.9"

問題復(fù)現(xiàn)

左邊為引入路徑

右邊為瀏覽器解析路徑

可以看出：對(duì)于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 是一個(gè)內(nèi)部使用的特殊前綴，它指示Vite從文件系統(tǒng)中直接提供資源。這個(gè)前綴通常在開發(fā)過程中由Vite自動(dòng)添加到模塊的路徑中，以區(qū)分模塊請(qǐng)求和普通的靜態(tài)資源請(qǐng)求。

當(dāng)在Vite項(xiàng)目中看到一個(gè)路徑包含 @fs，這意味著：

文件系統(tǒng)訪問：Vite正在告訴其內(nèi)部服務(wù)器，該資源應(yīng)該直接從文件系統(tǒng)中提供，而不是作為一個(gè)模塊或者通過其他方式處理。
絕對(duì)路徑：@fs 通常與文件的絕對(duì)路徑一起使用，這樣Vite就可以準(zhǔn)確地定位到文件系統(tǒng)中的資源位置。

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

vite的緩存問題

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

解決緩存：

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

node_modules/.vite

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

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

優(yōu)化的依賴模塊： Vite會(huì)預(yù)處理node_modules中的第三方依賴，將它們轉(zhuǎn)換為ES模塊格式，并存儲(chǔ)在.vite目錄中。這樣，瀏覽器可以直接加載這些模塊，而不需要額外的打包步驟。
源碼映射（Source Maps）：對(duì)于預(yù)處理的依賴，Vite還會(huì)生成源碼映射，以便在開發(fā)者工具中提供更好的調(diào)試體驗(yàn)。
HMR狀態(tài)：熱模塊替換（HMR）相關(guān)的狀態(tài)信息也可能存儲(chǔ)在這個(gè)目錄中，以便在模塊更新時(shí)快速應(yīng)用更改。
其他緩存數(shù)據(jù)： Vite可能會(huì)緩存一些其他數(shù)據(jù)，比如插件生成的臨時(shí)文件，以加快構(gòu)建和開發(fā)過程。

Vite對(duì)這個(gè)目錄的處理主要包括：

生成和更新緩存：在開發(fā)模式下，當(dāng)你第一次啟動(dòng)Vite服務(wù)器時(shí)，它會(huì)檢查node_modules中的依賴，并生成優(yōu)化后的版本存儲(chǔ)在.vite目錄。如果依賴項(xiàng)有更新，Vite會(huì)重新生成緩存。
讀取緩存：在后續(xù)的開發(fā)服務(wù)器啟動(dòng)中，Vite會(huì)讀取這些緩存數(shù)據(jù)，以避免重新優(yōu)化依賴項(xiàng)，從而加快啟動(dòng)速度。
清理緩存：如果你的依賴項(xiàng)發(fā)生變化，或者你手動(dòng)更新了Vite的版本，有時(shí)候你可能需要清理這個(gè)緩存目錄，以確保Vite使用最新的依賴項(xiàng)和配置。你可以通過刪除.vite目錄或者使用Vite提供的命令（如vite --force）來強(qiáng)制Vite重新生成緩存。

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

解決

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

題外話

webpack對(duì)于文件的緩存

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

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

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

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

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

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

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

在這個(gè)配置中，cacheDirectory 選項(xiàng)用于指定緩存存儲(chǔ)的目錄。如果你沒有指定 cacheDirectory，Webpack將使用默認(rèn)的緩存目錄，通常是在 node_modules/.cache/webpack 目錄下，這個(gè)目錄位于你的項(xiàng)目目錄中。

持久化緩存可以顯著提高構(gòu)建性能，特別是在大型項(xiàng)目中，因?yàn)樗苊饬嗽诿看螛?gòu)建時(shí)重新處理模塊。然而，需要注意的是，當(dāng)項(xiàng)目的依賴或配置發(fā)生變化時(shí)，可能需要清除緩存以確保構(gòu)建的正確性。

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

您可能感興趣的文章: