共有オプション

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

根

タイプ: string
デフォルト: process.cwd()

プロジェクトルートディレクトリ（ index.htmlがあります）。絶対的なパス、または現在の作業ディレクトリに対するパスにすることができます。

詳細については、 Project Rootを参照してください。

ベース

タイプ: string
デフォルト: /
関連: server.origin

開発または生産で提供される場合のパブリックパス。有効な値は次のとおりです。

Absolute URL PathName、Eg /foo/
フルURL、例えばhttps://bar.com/foo/ （原点部分は開発では使用されないため、値は/foo/と同じです）
空の文字列または./ （埋め込み展開用）

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

モード

タイプ: string
**デフォルト:**サーブ'development' 、ビルド用'production'

これを構成で指定すると**、サーブとビルドの両方の**デフォルトモードがオーバーライドされます。この値は、コマンドライン--modeオプションを介してオーバーライドすることもできます。

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

定義する

タイプ: Record<string, any>

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

ViteはEsbuildが定義して交換を実行するため、Value式はJSON-Serializable値（Null、Boolean、Number、String、Array、またはオブジェクト）または単一の識別子を含む文字列でなければなりません。非弦の値の場合、Viteは自動的にJSON.stringifyの文字列に変換します。

例:

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

NOTE

TypeScriptユーザーの場合、タイプチェックとIntelliSenseを取得するには、 env.d.tsまたはvite-env.d.tsファイルにタイプ宣言を追加してください。

例:

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

プラグイン

タイプ: （プラグイン | プラグイン[] | 約束<プラグイン | プラグイン[]>）[]

使用するプラグインの配列。 Falsyプラグインは無視され、プラグインの配列が平らになります。約束が返された場合、実行する前に解決されます。 Viteプラグインの詳細については、プラグインAPIを参照してください。

publicdir

タイプ: 文字列 | false
デフォルト: "public"

単純な静的資産として機能するディレクトリ。このディレクトリのファイルは、開発中に/で提供され、ビルド中にoutDirのルートにコピーされ、変換なしで常に提供またはコピーされます。値は、絶対ファイルシステムパスまたはプロジェクトルートに対するパスのいずれかです。

publicDir falseとして定義すると、この機能は無効になります。

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

CACHEDIR

タイプ: string
デフォルト: "node_modules/.vite"

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

resolve.alias

タイプ:record <string、string> | 配列<{find:string | regexp、交換:文字列、CustomResolver？:ResolverFunction | ResolverObject}>

エントリオプションとして@rollup/plugin-aliasに渡されます。オブジェクトまたは{ find, replacement, customResolver }ペアの配列のいずれかにすることができます。

システムパスをファイルするためにエイリアシングするときは、常に絶対パスを使用します。相対的なエイリアス値はAS-ISで使用され、ファイルシステムパスに解決されません。

プラグインを介して、より高度なカスタム解像度を実現できます。

Using with 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'、 '開発|生産 '] ( DefaultClientConditions）

パッケージから条件付き輸出を解決する際の追加の条件。

条件付き輸出を備えたパッケージには、 package.jsonに次のexportsフィールドがある場合があります。

json

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

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

開発|生産is a special value that is replaced with生産or開発depending on the value ofProcess.ENV.NODE_ENV. It is replaced with 生産whenプロセス。ENV.NODE_ENV=== '生産' and開発 。

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

Resolving subpath exports

「/」で終わるエクスポートキーはノードによって非推奨であり、うまく機能しない場合があります。代わりに、パッケージの著者に連絡して、 *サブパスパターンを使用してください。

resolve.mainFields

タイプ: string[]
デフォルト: ['browser', 'module', 'jsnext:main', 'jsnext'] （ defaultClientMainFields ）

パッケージのエントリポイントを解決するときに試してみるpackage.jsonのフィールドのリスト。注これは、 exportsフィールドから解決された条件付きエクスポートよりも優先されます。2 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 ]（ https://webpack.js.org/configuration/Resolve/#resolvesymlinks ）

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
  /**
   * デフォルト:未定義
   */
  localsConvention?:
    | 'camelCase'
    | 'camelCaseOnly'
    | 'dashes'
    | 'dashesOnly'
    | ((
        originalClassName: string,
        generatedClassName: string,
        inputFile: string,
      ) => string)
}

CSSモジュールの動作を構成します。オプションはPostCSSモジュールに渡されます。

このオプションは、Lightning CSSを使用する場合、効果はありません。有効にする場合、代わりにcss.lightningcss.cssModules使用する必要があります。

css.postcss

タイプ: 文字列 | （postcss.processoptions＆{プラグイン？:postcss.acceptedplugin []}）

インラインPOSTCSS構成または（デフォルトはProject Root）からPOSTCSS構成を検索するカスタムディレクトリ。

インラインPOSTCSS構成の場合、 postcss.config.jsと同じ形式が予想されます。ただし、 pluginsプロパティでは、配列形式のみを使用できます。

検索はPostCSS-Load-Configを使用して行われ、サポートされている構成ファイル名のみがロードされます。ワークスペースルート（またはワークスペースが見つからない場合はプロジェクトルート）の外側の構成ファイルは、デフォルトで検索されません。必要に応じて、ルートの外側のカスタムパスを指定して、代わりに特定の構成ファイルを代わりにロードできます。

注インライン構成が提供されている場合、Viteは他のPostCSS構成ソースを検索しません。

css.preprocessorOptions

タイプ: Record<string, object>

CSSの前処理者に渡すオプションを指定します。ファイル拡張機能は、オプションのキーとして使用されます。各プリプロセッサのサポートされているオプションは、それぞれのドキュメントにあります。

sass / scss :
- API:" Modern-Compiler "で使用するSASS APIを選択します | "モダンな" | 「レガシー」 (default「モダンコンパイラ」ifサス埋め込まれたis installed, otherwise「モダン」). For the best performance, it's recommended to use API: "Modern-compiler"with the Sass-埋め込まれたpackage. The"レガシー"APIは非推奨で、Vite 7で削除されます。
- オプション（モダン）
- オプション（レガシー）。
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', // または「モダン」、「レガシー」
        importers: [
          // ...
        ],
      },
    },
  },
})

css.preprocessorOptions[extension].additionalData

タイプ: 文字列 | （（ソース:string、filename:string）=>（string | {content:string;マップ？:sourcemap}））

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

例:

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

css.preprocessorMaxWorkers

実験:フィードバックを与える
タイプ: 番号 | true
デフォルト: 0 （労働者を作成してメインスレッドで実行しません）

このオプションが設定されている場合、CSSプレプロセッサは可能な場合は労働者で実行されます。 true 、CPUマイナス1の数を意味します。

css.devSourcemap

実験:フィードバックを与える
タイプ: boolean
デフォルト: false

開発中にSourcemapsを有効にするかどうか。

css.transformer

実験:フィードバックを与える
タイプ: `'postcss' | 「lightningcss」
デフォルト: 'postcss'

CSS処理に使用されるエンジンを選択します。詳細については、 Lightning CSSをご覧ください。

Duplicate @imports

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でカスタマイズできます。これは、正規表現、ピコマッチパターン、またはどちらの配列でもあります。

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

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

build.minifyがtrue場合、すべてのマイニル最適化がデフォルトで適用されます。その特定の側面を無効にするには、 esbuild.minifyIdentifiers 、またはesbuild.minifyWhitespace esbuild.minifySyntaxをfalseに設定します。注esbuild.minifyオプションを使用してbuild.minifyオーバーライドできません。

falseに設定して、ESBUILD変換を無効にします。

AssetsClude

タイプ: 文字列 | regexp | （弦 | regexp）[]
関連:静的資産処理

静的資産として扱う追加のPicomatchパターンを指定して、次のように指定してください。

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

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

例:

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

loglevel

タイプ: `'info' | 「警告」 | 'エラー' | 「サイレント」

コンソール出力の冗長性を調整します。デフォルトは'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
,
})

クリアスクリーン

タイプ: boolean
デフォルト: true

特定のメッセージを記録するときに、Viteが端子画面をクリアするのを防ぐためにfalseに設定します。コマンドラインを介して、 --clearScreen false使用します。

envdir

タイプ: string
デフォルト: root

.envファイルがロードされるディレクトリ。絶対的なパス、またはプロジェクトルートに関連するパスにすることができます。

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

envprefix

タイプ: 文字列 | 文字列[]
デフォルト: VITE_

envPrefixから始まるenv変数は、import.meta.envを介してクライアントソースコードに公開されます。

SECURITY NOTES

envPrefix ''として設定しないでください。これにより、すべてのENV変数が公開され、機密情報の予期せぬ漏れが発生します。 Viteは''検出するときにエラーを投げます。

再固定されていない変数を公開する場合は、定義を使用してそれを公開できます。

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

AppType

タイプ: `'スパ' | 「MPA」 | 「カスタム」
デフォルト: 'spa'

アプリケーションが単一ページアプリケーション（SPA）、マルチページアプリケーション（MPA）、またはカスタムアプリケーション（カスタムHTML処理を備えたSSRおよびフレームワーク）であるかどうか:

'spa' :HTMLミドルウェアを含め、スパフォールバックを使用します。プレビューでsingle: trueでSIRVを構成します
'mpa' :HTML MiddleWaresを含めます
'custom' :HTML MiddleWaresを含めないでください

ViteのSSRガイドで詳細をご覧ください。関連: server.middlewareMode 。

未来

タイプ: レコード<文字列、 '警告' | 未定義>
関連:変更を破る

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

可能なオプションの詳細については、 Breaking Changeページを参照してください。

共有オプション ​

根 ​

ベース ​

モード ​

定義する ​

プラグイン ​

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 ​

AssetsClude ​

loglevel ​

CustomLogger ​

クリアスクリーン ​

envdir ​

envprefix ​

AppType ​

未来 ​