共通オプション

特に記載がない限り、このセクションのオプションは開発、ビルド、プレビューのすべてに適用されます。

root

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

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

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

base

型: string
デフォルト: /
関連: server.origin

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

絶対 URL パス名。例 /foo/
完全な URL。例 https://bar.com/foo/（オリジン部分は開発環境では使用されないため、値は /foo/ と同じです）
空文字列または ./（埋め込みデプロイ用）

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

mode

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

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

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

define

型: Record<string, any>

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

Vite は esbuild の define を使って置換を行うので、値の式は JSON でシリアライズ可能な値（null、boolean、数値、文字列、配列、オブジェクト）または単一の識別子を含む文字列でなければなりません。文字列以外の値の場合、Vite は自動的に JSON.stringify で文字列に変換します。

例:

export default defineConfig({
  define: {
    __APP_VERSION__: JSON.stringify('v1.0.0'),
    __API_URL__: 'window.__backend_api_url',
  },
})

注意

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

例:

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

plugins

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

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

publicDir

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

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

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

詳細は 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 パッケージのエイリアスを設定することをお勧めします。Yarn と pnpm の両方で npm: のエイリアスをサポートします。

resolve.dedupe

型: string[]

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

SSR + ESM

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

resolve.conditions

型: string[]
デフォルト: ['module', 'browser', 'development|production'] (defaultClientConditions)

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

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

json

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

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

development|production は、process.env.NODE_ENV の値に応じて production または development に置換される特殊な値です。process.env.NODE_ENV === 'production' の場合には production に置換され、それ以外の場合は development に置換されます。

要件が満たされている場合は、import、require、default の条件が常に適用されることに注意してください。

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

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

resolve.mainFields

型: string[]
デフォルト: ['browser', 'module', 'jsnext:main', 'jsnext'] (defaultClientMainFields)

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

resolve.extensions

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

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

resolve.preserveSymlinks

型: boolean
デフォルト: false

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

関連: esbuild#preserve-symlinks, webpack#resolve.symlinks

html.cspNonce

型: string
関連: コンテンツセキュリティポリシー（CSP）

script や style タグを生成するときに使われる nonce 値のプレースホルダー。この値を設定すると、nonce 値を持つ meta タグも生成されます。

css.modules

型:

interface CSSModulesOptions {
  getJSON?: (
    cssFileName: string,
    json: Record<string, string>,
    outputFileName: string,
  ) => void
  scopeBehaviour?: 'global' | 'local'
  globalModulePaths?: RegExp[]
  exportGlobals?: boolean
  generateScopedName?:
    | string
    | ((name: string, filename: string, css: string) => string)
  hashPrefix?: string
  /**
   * デフォルト: undefined
   */
  localsConvention?:
    | 'camelCase'
    | 'camelCaseOnly'
    | 'dashes'
    | 'dashesOnly'
    | ((
        originalClassName: string,
        generatedClassName: string,
        inputFile: string,
      ) => string)
}

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

このオプションは Lightning CSS 使用時には効果がありません。有効にする場合は css.lightningcss.cssModules を使用してください。

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 プリプロセッサーに渡すオプションを指定します。オプションのキーとしてファイルの拡張子を使用します。各プリプロセッサーでサポートされているオプションは、それぞれのドキュメントで確認できます:

sass/scss:
- 使用する sass の API を api: "modern-compiler" | "modern" | "legacy" で選択します（sass-embedded がインストールされている場合はデフォルトで "modern-compiler"、そうでない場合は "modern"）。最高のパフォーマンスを得るには、sass-embedded パッケージで api: "modern-compiler" を使用することをお勧めします。"legacy" API は非推奨であり、Vite 7 で削除される予定です。
- オプション（modern）
- オプション（legacy）
less: オプション。
styl/stylus: オブジェクトとして渡せる define のみサポートされています。

例:

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        math: 'parens-division',
      },
      styl: {
        define: {
          $specialColor: new stylus.nodes.RGBA(51, 197, 255, 1),
        },
      },
      scss: {
        api: 'modern-compiler', // または "modern", "legacy"
        importers: [
          // ...
        ],
      },
    },
  },
})

css.preprocessorOptions[extension].additionalData

型: string | ((source: string, filename: string) => (string | { content: string; map?: SourceMap }))

このオプションは、各スタイルコンテンツに追加のコードを挿入するために使用できます。変数だけではなく実際のスタイルを含めた場合、それらのスタイルは最終的なバンドルに複製されることに注意してください。

例:

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

css.preprocessorMaxWorkers

実験的機能: フィードバックをしてください
型: number | true
デフォルト: 0（ワーカーを 1 つも作らず、メインスレッドで実行します）

このオプションを設定すると、可能な場合に CSS プリプロセッサーがワーカーで実行されます。true は CPU の数 -1 を意味します。

css.devSourcemap

実験的機能: フィードバックをしてください
型: boolean
デフォルト: false
開発時にソースマップを有効にするかどうか。

css.transformer

実験的機能: フィードバックをしてください
型: 'postcss' | 'lightningcss'
デフォルト: 'postcss'

CSS 処理に使用するエンジンを選択します。詳細は Lightning CSS を参照してください。

@import の重複

postcss (postcss-import) は、ブラウザーからの @import が重複した場合の動作が異なることに注意してください。postcss/postcss-import#462 を参照してください。

css.lightningcss

実験的機能: フィードバックをしてください
型:

import type {
  CSSModulesConfig,
  Drafts,
  Features,
  NonStandard,
  PseudoClasses,
  Targets,
} from 'lightningcss'

{
  targets?: Targets
  include?: Features
  exclude?: Features
  drafts?: Drafts
  nonStandard?: NonStandard
  pseudoClasses?: PseudoClasses
  unusedSymbols?: string[]
  cssModules?: CSSModulesConfig,
  // ...
}

Lightning CSS の設定。すべての変換オプションは Lightning CSS のリポジトリーで確認できます。

json.namedExports

型: boolean
デフォルト: true

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

json.stringify

型: boolean | 'auto'
デフォルト: 'auto'

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

'auto' に設定すると、データが 10kB より大きい場合にのみデータが文字列化されます。

esbuild

型: ESBuildOptions | false

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

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

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

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

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

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

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

assetsInclude

型: string | RegExp | (string | RegExp)[]
関連: 静的アセットの取り扱い

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

HTML から参照されたり、fetch や XHR で直接リクエストされたりすると、プラグインの変換パイプラインから除外されます。
JS からインポートすると、解決された URL 文字列が返されます（アセットタイプを別の方法で処理するための enforce: 'pre' プラグインがある場合は上書きされます）

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

例:

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

logLevel

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

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

customLogger

型:

interface Logger {
  info(msg: string, options?: LogOptions): void
  warn(msg: string, options?: LogOptions): void
  warnOnce(msg: string, options?: LogOptions): void
  error(msg: string, options?: LogErrorOptions): void
  clearScreen(type: LogType): void
  hasErrorLogged(error: Error | RollupError): boolean
  hasWarned: boolean
}

メッセージを記録するためのカスタムロガーを使用します。Vite の createLogger API を使って、デフォルトのロガーを取得し、例えば、メッセージを変更したり、特定の警告をフィルタリングしたりするようにカスタマイズできます。

import { createLogger
, defineConfig
 } from 'vite'

const logger
 = createLogger
()
const loggerWarn
 = logger
.warn


logger
.warn
 = (msg
, options
) => {
  // 空の CSS ファイル警告を無視する
  if (msg
.includes('vite:css') && msg
.includes(' is empty')) return
  loggerWarn
(msg
, options
)
}

export default defineConfig
({
  customLogger
: logger
,
})

clearScreen

型: boolean
デフォルト: true

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

envDir

型: string
デフォルト: root

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

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

envPrefix

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

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

SECURITY NOTES

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

プレフィックスのない変数を公開したい場合は、define を使って公開できます:

define: {
  'import.meta.env.ENV_VARIABLE': JSON.stringify(process.env.ENV_VARIABLE)
}

appType

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

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

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

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

future

型: Record<string, 'warn' | undefined>
関連: 破壊的変更

Vite の次期メジャーバージョンへのスムーズな移行に備え、将来的な破壊的変更を可能にします。このリストは、新機能の開発に伴い、いつでも更新、追加、削除される可能性があります。

設定可能なオプションの詳細については、破壊的変更ページを参照してください。

共通オプション ​

root ​

base ​

mode ​

define ​

plugins ​

publicDir ​

cacheDir ​

resolve.alias ​

resolve.dedupe ​

resolve.conditions ​

resolve.mainFields ​

resolve.extensions ​

resolve.preserveSymlinks ​

html.cspNonce ​

css.modules ​

css.postcss ​

css.preprocessorOptions ​

css.preprocessorOptions[extension].additionalData ​

css.preprocessorMaxWorkers ​

css.devSourcemap ​

css.transformer ​

css.lightningcss ​

json.namedExports ​

json.stringify ​

esbuild ​

assetsInclude ​

logLevel ​

customLogger ​

clearScreen ​

envDir ​

envPrefix ​

appType ​

future ​