靜態資源處理

相關：公開基礎路徑
相關：assetsInclude 設定選項

匯入資源作為 URL

匯入靜態資源將會在資源被提供時返回解析後的公開 URL

import imgUrl
 from './img.png'
document
.getElementById
('hero-img').src = imgUrl

例如，imgUrl 在開發期間會是 /src/img.png，在生產環境建置時則會變成 /assets/img.2d8efhg.png。

此行為類似於 webpack 的 file-loader。不同之處在於匯入可以使用絕對公開路徑（開發期間基於專案根目錄）或相對路徑。

CSS 中的 url() 引用也以相同方式處理。
如果使用 Vue 外掛，Vue SFC 模板中的資源引用會自動轉換為匯入。
常見的圖片、媒體和字型檔案類型會自動偵測為資源。您可以使用 assetsInclude 選項擴充內部清單。
引用的資源會被包含在建置資源圖表中，會獲得雜湊檔案名稱，並且可以由外掛進行處理以進行最佳化。
小於 assetsInlineLimit 選項位元組的資源將會內聯為 base64 資料 URL。
Git LFS 預留位置會自動排除在內聯之外，因為它們不包含所代表檔案的內容。要取得內聯，請確保在建置之前透過 Git LFS 下載檔案內容。
預設情況下，TypeScript 不會將靜態資源匯入識別為有效的模組。要解決此問題，請包含 vite/client。

透過 url() 內聯 SVG

當將 SVG 的 URL 傳遞給 JS 手動建構的 url() 時，變數應該用雙引號包住。

import imgUrl
 from './img.svg'
document
.getElementById
('hero-img').style
.background
 = `url("${imgUrl
}")`

明確的 URL 匯入

未包含在內部清單或 assetsInclude 中的資源，可以使用 ?url 後綴明確地匯入為 URL。這很有用，例如，匯入 Houdini Paint Worklets。

import workletURL
 from 'extra-scalloped-border/worklet.js?url'
CSS.paintWorklet.addModule(workletURL
)

明確的內聯處理

可以使用 ?inline 或 ?no-inline 後綴明確地匯入資源，以分別進行內聯或不內聯。

import imgUrl1
 from './img.svg?no-inline'
import imgUrl2
 from './img.png?inline'

匯入資源作為字串

可以使用 ?raw 後綴將資源匯入為字串。

import shaderString
 from './shader.glsl?raw'

匯入腳本作為 Worker

可以使用 ?worker 或 ?sharedworker 後綴將腳本匯入為 web worker。

// Separate chunk in the production build
import Worker
 from './shader.js?worker'
const worker
 = new Worker
()

// sharedworker
import SharedWorker
 from './shader.js?sharedworker'
const sharedWorker
 = new SharedWorker
()

// Inlined as base64 strings
import InlineWorker
 from './shader.js?worker&inline'

查看 Web Worker 章節以取得更多詳細資訊。

`public` 目錄

如果您有以下資源：

從未在原始程式碼中引用 (例如 robots.txt)
必須保留完全相同的檔案名稱（不進行雜湊）
…或者您只是不想為了取得資源的 URL 而必須先匯入資源

那麼您可以將資源放置在專案根目錄下的特殊 public 目錄中。此目錄中的資源將在開發期間以根路徑 / 提供，並按原樣複製到 dist 目錄的根目錄。

該目錄預設為 <root>/public，但可以透過 publicDir 選項進行設定。

請注意，您應該始終使用根絕對路徑引用 public 資源 - 例如，public/icon.png 在原始程式碼中應引用為 /icon.png。

new URL(url, import.meta.url)

import.meta.url 是一個原生 ESM 功能，可公開當前模組的 URL。將其與原生 URL 建構函式結合使用，我們可以透過 JavaScript 模組的相對路徑取得靜態資源的完整、解析後的 URL

const imgUrl = new URL('./img.png', import.meta.url).href

document.getElementById('hero-img').src = imgUrl

這在現代瀏覽器中原生運作 - 事實上，Vite 在開發期間根本不需要處理此程式碼！

此模式也透過樣板文字支援動態 URL

function getImageUrl(name) {
  // note that this does not include files in subdirectories
  return new URL(`./dir/${name}.png`, import.meta.url).href
}

在生產環境建置期間，Vite 會執行必要的轉換，以便即使在綁定和資源雜湊後，URL 仍然指向正確的位置。但是，URL 字串必須是靜態的，以便可以進行分析，否則程式碼會保持原樣，如果 build.target 不支援 import.meta.url，則可能會導致執行階段錯誤

// Vite will not transform this
const imgUrl = new URL(imagePath, import.meta.url).href

運作方式

Vite 會將 getImageUrl 函式轉換為

import __img0png from './dir/img0.png'
import __img1png from './dir/img1.png'

function getImageUrl(name) {
  const modules = {
    './dir/img0.png': __img0png,
    './dir/img1.png': __img1png,
  }
  return new URL(modules[`./dir/${name}.png`], import.meta.url).href
}

不適用於 SSR

如果您將 Vite 用於伺服器端渲染，則此模式不起作用，因為 import.meta.url 在瀏覽器和 Node.js 中具有不同的語義。伺服器綁定也無法提前確定用戶端主機 URL。

靜態資源處理 ​

匯入資源作為 URL ​

明確的 URL 匯入 ​

明確的內聯處理 ​

匯入資源作為字串 ​

匯入腳本作為 Worker ​

public 目錄 ​

new URL(url, import.meta.url) ​