靜態(tài)資源處理?
- 相關(guān): 公共基礎(chǔ)路徑
- 相關(guān):
assetsInclude配置項(xiàng)
將資源引入為 URL?
服務(wù)時(shí)引入一個(gè)靜態(tài)資源會(huì)返回解析后的公共路徑：
js
import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl
例如埂伦，imgUrl 在開發(fā)時(shí)會(huì)是 /img.png，在生產(chǎn)構(gòu)建后會(huì)是 /assets/img.2d8efhg.png朴读。
行為類似于 Webpack 的 file-loader斑举。區(qū)別在于導(dǎo)入既可以使用絕對(duì)公共路徑（基于開發(fā)期間的項(xiàng)目根路徑），也可以使用相對(duì)路徑。
url()在 CSS 中的引用也以同樣的方式處理楞慈。如果 Vite 使用了 Vue 插件，Vue SFC 模板中的資源引用都將自動(dòng)轉(zhuǎn)換為導(dǎo)入啃擦。
常見的圖像囊蓝、媒體和字體文件類型被自動(dòng)檢測(cè)為資源。你可以使用
assetsInclude選項(xiàng) 擴(kuò)展內(nèi)部列表议惰。引用的資源作為構(gòu)建資源圖的一部分包括在內(nèi)慎颗，將生成散列文件名，并可以由插件進(jìn)行處理以進(jìn)行優(yōu)化言询。
較小的資源體積小于
assetsInlineLimit選項(xiàng)值 則會(huì)被內(nèi)聯(lián)為 base64 data URL俯萎。Git LFS 占位符會(huì)自動(dòng)排除在內(nèi)聯(lián)之外，因?yàn)樗鼈儾话鼈兯硎镜奈募膬?nèi)容运杭。要獲得內(nèi)聯(lián)夫啊，請(qǐng)確保在構(gòu)建之前通過 Git LFS 下載文件內(nèi)容。
默認(rèn)情況下辆憔，TypeScript 不會(huì)將靜態(tài)資源導(dǎo)入視為有效的模塊撇眯。要解決這個(gè)問題，需要添加
vite/client虱咧。
顯式 URL 引入?
未被包含在內(nèi)部列表或 assetsInclude 中的資源熊榛，可以使用 ?url 后綴顯式導(dǎo)入為一個(gè) URL。這十分有用腕巡，例如玄坦，要導(dǎo)入 Houdini Paint Worklets 時(shí)：
js
import workletURL from 'extra-scalloped-border/worklet.js?url'
CSS.paintWorklet.addModule(workletURL)
將資源引入為字符串?
資源可以使用 ?raw 后綴聲明作為字符串引入。
js
import shaderString from './shader.glsl?raw'
導(dǎo)入腳本作為 Worker?
腳本可以通過 ?worker 或 ?sharedworker 后綴導(dǎo)入為 web worker。
js
// 在生產(chǎn)構(gòu)建中將會(huì)分離出 chunk
import Worker from './shader.js?worker'
const worker = new Worker()
js
// sharedworker
import SharedWorker from './shader.js?sharedworker'
const sharedWorker = new SharedWorker()
js
// 內(nèi)聯(lián)為 base64 字符串
import InlineWorker from './shader.js?worker&inline'
查看 Web Worker 小節(jié) 獲取更多細(xì)節(jié)煎楣。
public 目錄?
如果你有下列這些資源：
- 不會(huì)被源碼引用（例如
robots.txt） - 必須保持原有文件名（沒有經(jīng)過 hash）
- ...或者你壓根不想引入該資源豺总，只是想得到其 URL。
那么你可以將該資源放在指定的 public 目錄中择懂，它應(yīng)位于你的項(xiàng)目根目錄喻喳。該目錄中的資源在開發(fā)時(shí)能直接通過 / 根路徑訪問到，并且打包時(shí)會(huì)被完整復(fù)制到目標(biāo)目錄的根目錄下困曙。
目錄默認(rèn)是 <root>/public表伦，但可以通過 publicDir 選項(xiàng) 來配置。
請(qǐng)注意：
- 引入
public中的資源永遠(yuǎn)應(yīng)該使用根絕對(duì)路徑 —— 舉個(gè)例子慷丽，public/icon.png應(yīng)該在源碼中被引用為/icon.png绑榴。 -
public中的資源不應(yīng)該被 JavaScript 文件引用。
new URL(url, i<wbr style="box-sizing: border-box;">mport.meta.url)?
i<wbr style="box-sizing: border-box;">mport.meta.url 是一個(gè) ESM 的原生功能盈魁，會(huì)暴露當(dāng)前模塊的 URL。將它與原生的 URL 構(gòu)造器 組合使用窃诉，在一個(gè) JavaScript 模塊中杨耙，通過相對(duì)路徑我們就能得到一個(gè)被完整解析的靜態(tài)資源 URL：
js
const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('hero-img').src = imgUrl
這在現(xiàn)代瀏覽器中能夠原生使用 - 實(shí)際上，Vite 并不需要在開發(fā)階段處理這些代碼飘痛！
這個(gè)模式同樣還可以通過字符串模板支持動(dòng)態(tài) URL：
js
function getImageUrl(name) {
return new URL(`./dir/${name}.png`, import.meta.url).href
}
在生產(chǎn)構(gòu)建時(shí)珊膜，Vite 才會(huì)進(jìn)行必要的轉(zhuǎn)換保證 URL 在打包和資源哈希后仍指向正確的地址。然而宣脉，這個(gè) URL 字符串必須是靜態(tài)的车柠，這樣才好分析。否則代碼將被原樣保留塑猖、因而在 build.target 不支持 i<wbr style="box-sizing: border-box;">mport.meta.url 時(shí)會(huì)導(dǎo)致運(yùn)行時(shí)錯(cuò)誤竹祷。
js
// Vite 不會(huì)轉(zhuǎn)換這個(gè)
const imgUrl = new URL(imagePath, import.meta.url).href
注意：無法在 SSR 中使用
如果你正在以服務(wù)端渲染模式使用 Vite 則此模式不支持，因?yàn)?i<wbr style="box-sizing: border-box;">mport.meta.url 在瀏覽器和 Node.js 中有不同的語義羊苟。服務(wù)端的產(chǎn)物也無法預(yù)先確定客戶端主機(jī) URL塑陵。
