Vite 靜態(tài)資源處理

將資源引入為URL

服務(wù)時引入一個靜態(tài)資源會返回解析后的公共路徑：

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

例如，?imgUrl ?在開發(fā)時會是 ?/img.png?，在生產(chǎn)構(gòu)建后會是 ?/assets/img.2d8efhg.png?。

行為類似于 Webpack 的 ?file-loader?。區(qū)別在于導(dǎo)入既可以使用絕對公共路徑（基于開發(fā)期間的項目根路徑），也可以使用相對路徑。

• ?url()? 在 CSS 中的引用也以同樣的方式處理。
• 如果 Vite 使用了 Vue 插件，Vue SFC 模板中的資源引用都將自動轉(zhuǎn)換為導(dǎo)入。
• 常見的圖像、媒體和字體文件類型被自動檢測為資源。你可以使用 ?assetsInclude ?選項 擴展內(nèi)部列表。
• 引用的資源作為構(gòu)建資源圖的一部分包括在內(nèi)，將生成散列文件名，并可以由插件進行處理以進行優(yōu)化。
• 較小的資源體積小于 ?assetsInlineLimit ?選項值 則會被內(nèi)聯(lián)為 base64 data URL。

顯式URL引入

未被包含在內(nèi)部列表或 assetsInclude 中的資源，可以使用 ?url 后綴顯式導(dǎo)入為一個 URL。這十分有用，例如，要導(dǎo)入 Houdini Paint Worklets 時：

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

將資源引入為字符串

資源可以使用 ?raw 后綴聲明作為字符串引入。

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

導(dǎo)入腳本作為Worker

腳本可以通過 ?worker 或 ?sharedworker 后綴導(dǎo)入為 web worker。

// 在生產(chǎn)構(gòu)建中將會分離出 chunk
import Worker from './shader.js?worker'
const worker = new Worker()

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

// 內(nèi)聯(lián)為 base64 字符串
import InlineWorker from './shader.js?worker&inline'

public目錄

如果你有下列這些資源：

• 不會被源碼引用（例如 ?robots.txt?）
• 必須保持原有文件名（沒有經(jīng)過 hash）
• ...或者你壓根不想引入該資源，只是想得到其 URL。

那么你可以將該資源放在指定的 public?目錄中，它應(yīng)位于你的項目根目錄。該目錄中的資源在開發(fā)時能直接通過 ?/ ?根路徑訪問到，并且打包時會被完整復(fù)制到目標目錄的根目錄下。

目錄默認是 ?<root>/public?，但可以通過 ?publicDir?選項 來配置。

請注意：

• 引入 ?public ?中的資源永遠應(yīng)該使用根絕對路徑 —— 舉個例子，?public/icon.png? 應(yīng)該在源碼中被引用為 ?/icon.png?。
• ?public中的資源不應(yīng)該被 JavaScript 文件引用。

new URL(url, import.meta.url)

import.meta.url 是一個 ESM 的原生功能，會暴露當前模塊的 URL。將它與原生的 URL 構(gòu)造器 組合使用，在一個 JavaScript 模塊中，通過相對路徑我們就能得到一個被完整解析的靜態(tài)資源 URL：

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

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

這在現(xiàn)代瀏覽器中能夠原生使用 - 實際上，Vite 并不需要在開發(fā)階段處理這些代碼！

這個模式同樣還可以通過字符串模板支持動態(tài) URL：

function getImageUrl(name) {
  return new URL(`./dir/${name}.png`, import.meta.url).href
}

在生產(chǎn)構(gòu)建時，Vite 才會進行必要的轉(zhuǎn)換保證 URL 在打包和資源哈希后仍指向正確的地址。

注意：無法在 SSR 中使用

如果你正在以服務(wù)端渲染模式使用 Vite 則此模式不支持，因為import.meta.url?在瀏覽器和 Node.js 中有不同的語義。服務(wù)端的產(chǎn)物也無法預(yù)先確定客戶端主機 URL。