Vite2 靜態(tài)資源處理
Importing Asset as URL
導(dǎo)入靜態(tài)資產(chǎn)時(shí)，將返回解析后的公共URL:
import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl
例如，在開(kāi)發(fā)階段，imgUrl將是/img.png，而在生產(chǎn)版本中，它將變成/assets/img.2d8efhg.png。
其行為類似于webpack的文件加載器。區(qū)別在于導(dǎo)入既可以使用絕對(duì)公共路徑(基于開(kāi)發(fā)期間的項(xiàng)目根路徑)，也可以使用相對(duì)路徑。
CSS中的url()引用也以同樣的方式處理。
如果使用Vue插件，Vue SFC模板中的資產(chǎn)引用將自動(dòng)轉(zhuǎn)換為導(dǎo)入。
常見(jiàn)的圖像、媒體和字體文件類型被自動(dòng)檢測(cè)為資產(chǎn)。您可以使用assetsInclude選項(xiàng)擴(kuò)展內(nèi)部列表。
引用的資產(chǎn)作為構(gòu)建資產(chǎn)圖的一部分包括在內(nèi)，將得到散列文件名，并可以由插件進(jìn)行處理以進(jìn)行優(yōu)化。
字節(jié)數(shù)小于assetsInlineLimit選項(xiàng)的資產(chǎn)將內(nèi)聯(lián)為base64數(shù)據(jù)url。
Explicit URL Imports
沒(méi)有包含在內(nèi)部列表或assetsInclude中的資產(chǎn)，可以使用? URL后綴作為URL顯式導(dǎo)入。這是有用的，例如，import Houdini Paint Worklets
import workletURL from 'extra-scalloped-border/worklet.js?url'
CSS.paintWorklet.addModule(workletURL)
Importing Asset as String
資源可以使用?raw后綴作為字符串導(dǎo)入。
import shaderString from './shader.glsl?raw'
Importing Script as a Worker
腳本可以作為帶有?worker后綴的web worker導(dǎo)入。
// Separate chunk in the production build
import Worker from './shader.js?worker'
const worker = new Worker()
// Inlined as base64 strings
import InlineWorker from './shader.js?worker&inline'
The public Directory
如果你有以下資產(chǎn):
從未在源代碼中引用過(guò)(例如robots.txt)
必須保留完全相同的文件名(沒(méi)有哈希)
…或者您只是不想為了獲取URL而首先導(dǎo)入資產(chǎn)
然后，您可以將資產(chǎn)放置在項(xiàng)目根目錄下的特殊公共目錄中。在開(kāi)發(fā)過(guò)程中，這個(gè)目錄中的資源將在根路徑/中提供，并原樣復(fù)制到dist目錄的根目錄中。
該目錄默認(rèn)為/public，但可以通過(guò)publicDir選項(xiàng)配置。
注意:
你應(yīng)該總是使用根目錄絕對(duì)路徑來(lái)引用公共資產(chǎn)——例如，public/icon.png在源代碼中應(yīng)該被引用為/icon.png。
公共的資產(chǎn)不能從JavaScript中導(dǎo)入。