Viteの構成

コマンドラインからvite実行すると、Viteは自動的にプロジェクトルート内のvite.config.jsという名前の構成ファイルを解決しようとします（他のJSおよびTS拡張機能もサポートされています）。

最も基本的な構成ファイルは次のようになります:

vite.config.js

export default {
  // 構成オプション
}

注Viteは、プロジェクトがネイティブノードESMを使用していない場合でも、ESモジュールの構文type: "module"構成ファイルに使用してサポートしますpackage.jsonこの場合、構成ファイルはロード前に自動処理されます。

--config CLIオプションで使用する構成ファイルを明示的に指定することもできます（ cwdに対して解決されます）:

bash

vite --config my-config.js

CONFIG LOADING

デフォルトでは、Viteはesbuildを使用して構成を一時ファイルにバンドルし、ロードします。これにより、MonorepoでTypeScriptファイルをインポートする際に問題が発生する可能性があります。このアプローチで問題が発生した場合は、代わりにモジュールランナーを使用するために--configLoader runner指定できます。これは、一時的な構成を作成せず、その場でファイルを変換します。モジュールランナーは構成ファイルのCJSをサポートしていませんが、外部CJSパッケージは通常どおり機能するはずです。

または、TypeScript（EG node --experimental-strip-types ）をサポートする環境を使用している場合、またはPlane JavaScriptのみを書いている場合は、環境のネイティブランタイムを使用して構成ファイルをロードするために--configLoader native指定できます。構成ファイルによってインポートされたモジュールへの更新は検出されないため、Viteサーバーを自動再構築しないことに注意してください。

構成IntelliSense

ViteはTypeScript Typingsを使用して出荷されるため、JSDOCタイプのヒントでIDEのIntelliSenseを活用できます。

/** @type {import（ 'vite'）。userconfig} */
export default {
  // ...
}

または、JSDOCアノテーションを必要とせずにIntelliSenseを提供する必要があるdefineConfigヘルパーを使用できます。

import { defineConfig } from 'vite'

export default defineConfig({
  // ...
})

ViteはTypeScript構成ファイルもサポートしています。上記のdefineConfigヘルパー関数、またはsatisfies演算子でvite.config.ts使用できます。

import type { UserConfig } from 'vite'

export default {
  // ...
} satisfies UserConfig

条件付き設定

Configがコマンド（ serveまたはbuild ）に基づいてオプションを条件付けて決定する必要がある場合、使用されているモード、SSRビルド（ isSsrBuild ）の場合、またはビルド（ isPreview ）の場合、代わりに関数をエクスポートできます。

import { defineConfig
 } from 'vite'
//  - -カット - -
export default defineConfig
(({ command
, mode
, isSsrBuild
, isPreview
 }) => {
  if (command
 === 'serve') {
    return {
      // 開発固有の構成
    }
  } else {
    // コマンド=== 'ビルド'
    return {
      // 特定の構成を作成します
    }
  }
})

ViteのAPIでは、DEV（CLI vite 、およびvite serve vite dev ）の間はcommand値がserveで、生産用に構築されるときはbuildあることに注意することが重要です（ vite build ）。

isSsrBuildとisPreview 、それぞれbuildとserveコマンドの種類を区別するための追加のオプションフラグです。 Vite構成をロードするいくつかのツールは、これらのフラグをサポートせず、代わりにundefined渡す場合があります。したがって、 trueとfalseに対する明示的な比較を使用することをお勧めします。

async config

構成がASYNC関数を呼び出す必要がある場合、代わりに非同期関数をエクスポートできます。また、この非同期関数は、Intellisenseサポートを改善するためにdefineConfigに渡すこともできます。

import { defineConfig
 } from 'vite'
//  - -カット - -
export default defineConfig
(async ({ command
, mode
 }) => {
  const data
 = await asyncFunction()
  return {
    // Vite Config
  }
})

構成の環境変数を使用します

環境変数は、通常どおりprocess.envから取得できます。

viteは、Vite構成を評価した後にのみ決定できるため、デフォルトで.envファイルをロードしないことに注意してください。たとえば、 rootとenvDirオプションは負荷の動作に影響します。ただし、エクスポートされたloadEnvヘルパーを使用して、必要に応じて特定の.envファイルをロードできます。

import { defineConfig
, loadEnv
 } from 'vite'

export default defineConfig
(({ mode
 }) => {
  // 現在の作業ディレクトリの`mode`に基づいてENVファイルをロードします。
  // 3番目のパラメーターを ''に設定します。
  // `VITE_`プレフィックス。
  const env
 = loadEnv
(mode
, process
.cwd
(), '')
  return {
    // Vite Config
    define
: {
      __APP_ENV__
: JSON
.stringify
(env
.APP_ENV
),
    },
  }
})

Viteの構成 ​

構成IntelliSense ​

条件付き設定 ​

async config ​

構成の環境変数を使用します ​

Viteの構成

構成IntelliSense

条件付き設定

async config

構成の環境変数を使用します