Skip to content

共通オプション

root

  • 型: string
  • デフォルト: process.cwd()

プロジェクトのルートディレクトリ(index.html が置かれている場所)。絶対パス、または現在のワーキングディレクトリからの相対パスを指定できます。

詳細は プロジェクトルート を参照してください。

base

  • 型: string
  • デフォルト: /

開発環境または本番環境で配信される際のベースとなるパブリックパス。有効な値は次のとおりです:

  • 絶対 URL パス名。例 /foo/
  • 完全な URL。例 https://foo.com/
  • 空文字列または ./(埋め込みデプロイ用)

詳細は Public Base Path を参照してください。

mode

  • 型: string
  • デフォルト: serve は 'development'、build では 'production'

config でこれを指定すると、serve と build 両方のデフォルトモードが上書きされます。この値はコマンドラインの --mode オプションでも上書きできます。

詳細は 環境変数とモード を参照してください。

define

  • 型: Record<string, string>

グローバル定数の置換を定義します。エントリは開発時にグローバルで定義され、ビルド時に静的に置き換えられます。

  • 2.0.0-beta.70 以降、文字列の値は純粋な式として評価されるので、文字列の定数を定義する場合は、明示的に引用符で囲う必要があります(例 JSON.stringify を使う)。

  • esbuild の動作と矛盾しないように、式は JSON オブジェクト(null, boolean, number, string, array, object)か単一の識別子でなければなりません。

  • マッチした部分が他の文字、数字、_ または $ で囲まれていない場合のみ置換されます。

WARNING

構文解析なしの単純なテキスト置換として実装されているため、define は「定数」にのみ使用することをおすすめします。

例えば、process.env.FOO__APP_VERSION__ などが適しています。しかし、processglobal はこのオプションに入れるべきではありません。変数は代わりに Shim や Polyfill で使用できます。

注意

TypeScript を使用する場合、型チェックと自動補完を利用するには env.d.ts または vite-env.d.ts ファイルに型定義を追加してください。

例:

// vite-env.d.ts
declare const __APP_VERSION__: string

注意

開発環境とビルド環境で define の実装が異なるので、矛盾を回避するために、いくつかの使い方を避ける必要があります。

例:

const obj = {
  __NAME__, // オブジェクトのショートハンドプロパティ名を定義しないこと
  __KEY__: value // オブジェクトのキーを定義しないこと
}

plugins

  • 型: (Plugin | Plugin[] | Promise<Plugin | Plugin[]>)[]

使用するプラグインの配列。falsy なプラグインは無視され、プラグインの配列はフラット化されます。 promise が返された場合は、実行前に解決されます。 Vite プラグインの詳細は プラグイン API を参照してください。

publicDir

  • 型: string | false
  • デフォルト: "public"

加工せずに静的アセットとして配信するディレクトリ。このディレクトリのファイルは、開発時には / として配信され、ビルド時には outDir のルートにコピーされます。常に変換されることなくそのまま配信またはコピーされます。この値にはファイルシステムの絶対パスかプロジェクトルートからの相対パスを指定できます。

publicDirfalse に設定すると、この機能は無効になります。

詳細は public ディレクトリ を参照してください。

cacheDir

  • 型: string
  • デフォルト: "node_modules/.vite"

キャッシュファイルを保存するディレクトリ。このディレクトリのファイルは、事前バンドルされた依存関係や Vite によって生成されたキャッシュファイルで、パフォーマンスを向上させることができます。--force フラグを使用したり、手動でディレクトリを削除するとキャッシュファイルを再生成できます。この値にはファイルシステムの絶対パスかプロジェクトルートからの相対パスを指定できます。package.json が検出されなかった場合のデフォルトは .vite です。

resolve.alias

  • 型:Record<string, string> | Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>

エントリオプションとして @rollup/plugin-alias に渡されます。{ find, replacement, customResolver } の配列か、オブジェクトを指定します。

ファイルシステムのパスにエイリアスを設定する場合は、必ず絶対パスを使用してください。相対的なエイリアス値はそのまま使用され、ファイルシステムのパスには解決されません。

より高度なカスタム解決はプラグインによって実現できます。

エイリアスの操作

SSR の外部化された依存関係のエイリアスを設定した場合は、実際の node_modules パッケージのエイリアスを設定することをお勧めします。Yarnpnpm の両方で npm: のエイリアスをサポートします。

resolve.dedupe

  • 型: string[]

アプリ内で同じ依存関係のコピーが重複している場合(おそらくモノレポのリンクされたパッケージや巻き上げが原因)、このオプションを使用して、リストされた依存関係を(プロジェクトルートから)常に同じコピーに解決するように Vite に強制します。

SSR + ESM

SSR ビルドの場合、build.rollupOptions.output で設定された ESM ビルド出力に対して重複排除が機能しません。これを回避するには、ESM のモジュール読み込みのためのプラグインのサポートが改善されるまで、CJS ビルド出力を使用する必要があります。

resolve.conditions

  • 型: string[]

パッケージからの条件付きエクスポート解決する際に許可される追加の条件。

条件付きエクスポートを持つパッケージでは、package.json に次の exports フィールドが含まれる場合があります:

{
  "exports": {
    ".": {
      "import": "./index.mjs",
      "require": "./index.js"
    }
  }
}

ここで、importrequire は「条件」です。条件はネストさせることができ、最も具体的なものから最も具体的でないものまで指定する必要があります。

Vite には「許可された条件」のリストがあり、許可されたリストにある最初の条件と一致します。 デフォルトで許可される条件は、importmodulebrowserdefault と、現在のモードに基づく production/development です。resolve.conditions 設定オプションを使用すると、追加の許可条件を指定できます。

サブパスのエクスポートの解決

エクスポートのキーが "/" で終わるのは Node では非推奨で、うまく動作しない可能性があります。代わりに * サブパスパターン を使用するよう、パッケージ作者に連絡してください。

resolve.mainFields

  • 型: string[]
  • デフォルト: ['module', 'jsnext:main', 'jsnext']

パッケージのエントリポイントを解決するときに試行する package.json のフィールドのリスト。これは exports フィールドから解決された条件付きエクスポートよりも優先順位が低いことに注意してください: エントリポイントが exports からの解決に成功した場合、main フィールドは無視されます。

resolve.extensions

  • 型: string[]
  • デフォルト: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']

拡張子を省略したインポートに試行するファイル拡張子のリスト。カスタムインポートタイプ(.vue など)の拡張子を省略すると、IDE や型のサポートに支障をきたす可能性があるため、推奨されません

  • 型: boolean
  • デフォルト: false

この設定を有効にすると、Vite は実際のファイルパス(つまりシンボリックリンクを辿った後のパス)ではなく、オリジナルのファイルパス(つまりシンボリックリンクを辿っていないパス)でファイルの同一性を判別します。

css.modules

  • 型:
interface CSSModulesOptions {
  scopeBehaviour?: 'global' | 'local'
  globalModulePaths?: RegExp[]
  generateScopedName?:
    | string
    | ((name: string, filename: string, css: string) => string)
  hashPrefix?: string
  /**
   * デフォルト: null
   */
  localsConvention?:
    | 'camelCase'
    | 'camelCaseOnly'
    | 'dashes'
    | 'dashesOnly'
    | null
}

CSS モジュールの動作を設定します。オプションは postcss-modules に渡されます。

css.postcss

  • 型: string | (postcss.ProcessOptions & { plugins?: postcss.AcceptedPlugin[] })

インラインの PostCSS 設定、もしくは PostCSS の設定ファイルを検索するカスタムディレクトリ(デフォルトはプロジェクトルート)。

インラインの PostCSS の設定には、postcss.config.js と同じ書式を想定してします。しかし、plugins のプロパティには、配列のフォーマットしか使用できません。

検索は postcss-load-config を使用し、対応する設定ファイル名のみが読み込まれます。

インライン設定が提供された場合、Vite は他の PostCSS 設定ソースを検索しないことに注意してください。

css.preprocessorOptions

  • 型: Record<string, object>

CSS プリプロセッサに渡すオプションを指定します。オプションのキーとしてファイルの拡張子を使用します。例:

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;`
      },
      styl: {
        additionalData: `$injectedColor ?= orange`
      }
    }
  }
})

css.devSourcemap

  • 実験的機能

  • 型: boolean

  • デフォルト: false

    開発時にソースマップを有効にするかどうか。

json.namedExports

  • 型: boolean
  • デフォルト: true

.json ファイルからの名前付きインポートをサポートするかどうか。

json.stringify

  • 型: boolean
  • デフォルト: false

true に設定すると、インポートされた JSON は export default JSON.parse("...") に変換されます。これは特に JSON ファイルが大きい場合、オブジェクトリテラルよりも大幅にパフォーマンスが向上します。

有効にすると、名前付きインポートは無効になります。

esbuild

  • 型: ESBuildOptions | false

ESBuildOptionsesbuild 自身の変換オプションを拡張します。最も一般的な使用例は、JSX のカスタマイズです:

export default defineConfig({
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  }
})

デフォルトでは esbuild は ts, jsx, tsx ファイルに適用されます。esbuild.includeesbuild.exclude でカスタマイズでき、正規表現か picomatch パターン、もしくはそれらの配列を指定します。

また、esbuild.jsxInject を使用すると、esbuild で変換されたすべてのファイルに対して JSX ヘルパの import を自動的に注入できます:

export default defineConfig({
  esbuild: {
    jsxInject: `import React from 'react'`
  }
})

build.minifytrue のとき、全てのミニファイ最適化はデフォルトで適用されます。特定の側面を無効化するためには、esbuild.minifyIdentifiersesbuild.minifySyntaxesbuild.minifyWhitespace のいずれかを false に設定してください。build.minify を上書きするために esbuild.minify を利用できないことに注意してください。

esbuild の変換を無効にするには false を設定します。

assetsInclude

静的アセットとして扱う追加の picomatch パターンを指定します。そして:

  • HTML から参照されたり、fetch や XHR で直接リクエストされたりすると、プラグインの変換パイプラインから除外されます。

  • JS からインポートすると、解決された URL 文字列が返されます(アセットタイプを別の方法で処理するための enforce: 'pre' プラグインがある場合は上書きされます)

組み込みのアセットタイプのリストはこちらをご覧ください。

例:

export default defineConfig({
  assetsInclude: ['**/*.gltf']
})

logLevel

  • 型: 'info' | 'warn' | 'error' | 'silent'

コンソール出力の詳細度を調整します。デフォルトは 'info' です。

clearScreen

  • 型: boolean
  • デフォルト: true

Vite が特定のメッセージをログに出力する際、ターミナル画面をクリアしないようにするには false に設定します。コマンドラインからは、--clearScreen false を使用してください。

envDir

  • 型: string
  • デフォルト: root

.env ファイルを読み込むディレクトリ。絶対パス、もしくはプロジェクトルートからの相対パスを指定します。

環境ファイルの詳細についてはこちらをご覧ください。

envPrefix

  • 型: string | string[]
  • デフォルト: VITE_

envPrefix で始まる環境変数は、import.meta.env でクライアントのソースコードに公開されます。

SECURITY NOTES

envPrefix'' を設定してはいけません。全ての env 変数を公開してしまい、予期せぬ機密情報の漏洩を引き起こします。Vite は '' を検出するとエラーをスローします。

appType

  • 型: 'spa' | 'mpa' | 'custom'
  • デフォルト: 'spa'

アプリケーションがシングルページアプリケーション (SPA) か、マルチページアプリケーション (MPA)か、カスタムアプリケーション (SSR と独自に HTML を処理するフレームワーク):

  • 'spa': SPA 用のフォールバックミドルウェアを含め、プレビューで single: truesirv に設定する
  • 'mpa': SPA 用でない HTML ミドルウェアのみを含める
  • 'custom': HTML ミドルウェアを含めない

詳細は Vite の SSR ガイド 参照してください。関連: server.middlewareMode

Released under the MIT License. (3043c26b)