共有オプション

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

root

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

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

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

base

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

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

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

詳細については、パブリックベースパスを参照してください。

mode

型: string
デフォルト: serve の場合は 'development'、build の場合は 'production'

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

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

define

型: Record<string, any>

グローバル定数の置換を定義します。エントリは、開発中はグローバルとして定義され、ビルド中は静的に置換されます。

Vite は esbuild の定義を使用して置換を実行するため、値の式は JSON シリアライズ可能な値（null、ブール値、数値、文字列、配列、またはオブジェクト）または単一の識別子を含む文字列である必要があります。文字列以外の値の場合、Vite は自動的に JSON.stringify で文字列に変換します。

例

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

注意

TypeScript を使用している場合は、型チェックと IntelliSense を有効にするために、env.d.ts または vite-env.d.ts ファイルに型宣言を追加してください。

例

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

plugins

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

使用するプラグインの配列。偽のプラグインは無視され、プラグインの配列はフラット化されます。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 }>

entries オプションとして @rollup/plugin-alias に渡されます。オブジェクト、または { find, replacement, customResolver } ペアの配列のいずれかになります。

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

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

SSR での使用

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 から正常に解決された場合、メインフィールドは無視されます。

resolve.extensions

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

拡張子を省略したインポートで試すファイル拡張子のリスト。IDE および型サポートを妨げる可能性があるため、カスタムインポートタイプ（例：.vue）の拡張子を省略することは推奨されません。

resolve.preserveSymlinks

型: boolean
デフォルト: false

この設定を有効にすると、vite は、実際のファイルパス（つまり、シンボリックリンクをたどった後のパス）ではなく、元のファイルパス（つまり、シンボリックリンクをたどらないパス）によってファイル ID を判断します。

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

html.cspNonce

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

スクリプト/スタイルタグを生成する際に使用される nonce 値のプレースホルダー。この値を設定すると、nonce 値を持つメタタグも生成されます。

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
  /**
   * default: 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
- api: "modern-compiler" | "modern" | "legacy"を使用して使用するsass APIを選択します（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', // or "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（ワーカーを作成せず、メインスレッドで実行されます）

このオプションが設定されている場合、可能な場合は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ファイルに適用されます。これは、正規表現、picomatchパターン、またはそのいずれかの配列であるesbuild.includeとesbuild.excludeを使用してカスタマイズできます。

さらに、esbuild.jsxInjectを使用して、esbuildによって変換されたすべてのファイルに対してJSXヘルパーインポートを自動的に挿入することもできます。

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

build.minifyがtrueの場合、すべてのminify最適化がデフォルトで適用されます。その特定の側面を無効にするには、esbuild.minifyIdentifiers、esbuild.minifySyntax、またはesbuild.minifyWhitespaceオプションのいずれかをfalseに設定します。esbuild.minifyオプションを使用してbuild.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
) => {
  // Ignore empty CSS files warning
  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を介してクライアントソースコードに公開されます。

セキュリティに関する注意

envPrefixは''として設定しないでください。これにより、すべての環境変数が公開され、機密情報が予期せず漏洩する可能性があります。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 ​