共有オプション

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

root

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

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

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

base

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

開発または本番で提供される際のベース公開パス。有効な値は次のとおりです。

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

詳細については、公開ベースパスを参照してください。

mode

型: string
デフォルト: 開発時は 'development'、ビルド時は 'production'

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

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

define

型: Record<string, any>

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

Vite は esbuild の define を使用して置換を実行するため、値の式は JSON シリアライズ可能な値（null、boolean、number、string、array、または object）または単一の識別子を含む文字列である必要があります。文字列以外の値の場合、Vite は自動的に JSON.stringify で文字列に変換します。

例

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

注意

TypeScript ユーザーは、型チェックと Intellisense を得るために、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 }>

@rollup/plugin-alias の entries オプションとして渡されます。オブジェクト、または { 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 の条件は、要件が満たされていれば常に適用されることに注意してください。

resolve.mainFields

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

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

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
関連: Content Security Policy (CSP)

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

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
- インストールされている場合は sass-embedded を使用し、そうでない場合は sass を使用します。最高のパフォーマンスを得るには、sass-embedded パッケージをインストールすることをお勧めします。
- オプション
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: {
        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
デフォルト: true

CSS プリプロセッサが使用できる最大スレッド数を指定します。true は CPU 数から 1 を引いた数までを意味します。0 に設定すると、Vite はワーカーを作成せず、メインスレッドでプリプロセッサを実行します。

プリプロセッサのオプションによっては、このオプションが 0 に設定されていない場合でも、Vite はメインスレッドでプリプロセッサを実行する可能性があります。

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 ヘルパーインポートを自動的に注入することもできます。

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 | false
デフォルト: root

.env ファイルがロードされるディレクトリ。絶対パス、またはプロジェクトルートに対する相対パスを指定できます。false は .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 フォールバックを使用します。プレビューで sirv を single: true で設定します。
'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 ​