静的資産処理

• 関連:パブリックベースパス
• 関連: assetsInclude構成オプション

AssetをURLとしてインポートします

静的資産をインポートすると、解決されたパブリックURLが提供されたときに返されます。

import 'vite/client'
//  - -カット - -
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を介してファイルのコンテンツを必ずダウンロードしてください。

• タイプスクリプトは、デフォルトでは、静的資産のインポートを有効なモジュールとして認識していません。これを修正するには、 vite/clientを含めます。

Inlining SVGs through url()

SVGのURLをJSによって手動で構築されたurl()に渡す場合、変数は二重引用符にラップする必要があります。

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

明示的なURLインポート

内部リストまたはassetsIncludeに含まれていない資産は、 ?url接尾辞を使用してURLとして明示的にインポートできます。これは、たとえば、 Houdiniペイントワークレットをインポートするのに役立ちます。

import 'vite/client'
//  - -カット - -
import workletURL from 'extra-scalloped-border/worklet.js?url'
CSS.paintWorklet.addModule(workletURL)

明示的なインライン処理

資産は、それぞれ?inlineまたは?no-inline接尾辞を使用して、インラインでインランスを付けて、またはインライン化なしで明示的にインポートできます。

import 'vite/client'
//  - -カット - -
import imgUrl1 from './img.svg?no-inline'
import imgUrl2 from './img.png?inline'

資産を文字列としてインポートします

資産は、 ?rawサフィックスを使用して文字列としてインポートできます。

import 'vite/client'
//  - -カット - -
import shaderString from './shader.glsl?raw'

労働者としてスクリプトをインポートします

スクリプトは、 ?workerまたは?sharedworker接尾辞を備えたWebワーカーとしてインポートできます。

import 'vite/client'
//  - -カット - -
// 生産ビルドでは別々のチャンク
import Worker from './shader.js?worker'
const worker = new Worker()

import 'vite/client'
//  - -カット - -
// 共有ワーカー
import SharedWorker from './shader.js?sharedworker'
const sharedWorker = new SharedWorker()

import 'vite/client'
//  - -カット - -
// base64文字列としてインラインしています
import InlineWorker from './shader.js?worker&inline'

詳細については、 Webワーカーのセクションをご覧ください。

publicディレクトリ

あなたがその資産を持っている場合:

• ソースコードで言及したことはありません（例: robots.txt ）
• まったく同じファイル名を保持する必要があります（ハッシュなし）
• ...または、URLを取得するためだけに最初に資産をインポートする必要はありません

次に、プロジェクトルートの下にある特別なpublicディレクトリに資産を配置できます。このディレクトリのアセットは、開発中にルートパス/で提供され、distディレクトリのルートにコピーされます。

ディレクトリは<root>/publicですが、 publicDirオプションで構成できます。

ルート絶対パスを使用して常にpublicアセットを参照する必要があることに注意してください。たとえば、 public/icon.pngソースコードで/icon.png参照する必要があります。

new URL（url、import.meta.url）

import.meta.urlは、現在のモジュールのURLを公開するネイティブESM機能です。ネイティブURLコンストラクターと組み合わせることで、JavaScriptモジュールからの相対パスを使用して、静的資産の完全で解決されたURLを取得できます。

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

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

これは最新のブラウザでネイティブに機能します - 実際、Viteは開発中にこのコードをまったく処理する必要はありません！

このパターンは、テンプレートリテラルを介して動的なURLをサポートしています。

function getImageUrl(name) {
  // これには、サブディレクトリにファイルが含まれていないことに注意してください
  return new URL(`./dir/${name}.png`, import.meta.url).href
}

生産ビルド中、Viteは必要な変換を実行するため、URLはバンドリングや資産ハッシュ後でも正しい場所を指します。ただし、URL文字列は静的である必要があるため、分析できます。 build.targetしないと、コードがそのまま残されますimport.meta.url

// Viteはこれを変換しません
const imgUrl = new URL(imagePath, import.meta.url).href

How it works

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
}

Does not work with SSR

サーバーサイドレンダリングにViteを使用している場合、このパターンは機能しません。 import.meta.urlブラウザとnode.jsに異なるセマンティクスがあるため、サーバーバンドルは、クライアントホストURLを事前に決定することもできません。