サーバオプション

server.host

型: string | boolean
デフォルト: 'localhost'

サーバがリッスンすべき IP アドレスを指定します。 0.0.0.0 もしくは true に設定すると、LAN やパブリックアドレスを含むすべてのアドレスをリッスンします。

これは CLI で --host 0.0.0.0 や --host を使用して設定できます。

server.port

型: number
デフォルト: 5173

サーバのポートを指定します。このポートがすでに使用されている場合、Vite は次に使用可能なポートを自動的に試すので、サーバが最終的にリッスンする実際のポートとは異なる場合があることに注意してください。

server.strictPort

型: boolean

true に設定すると、ポートがすでに使用されている場合に、次に使用可能なポートを自動的に試すことなく終了します。

server.https

型: boolean | https.ServerOptions

TLS + HTTP/2 を有効にします。server.proxy オプションも使用されている場合にのみ TLS にダウングレードされるので注意してください。

この値は https.createServer() に渡されるオプションオブジェクトでも構いません。

server.open

型: boolean | string

サーバ起動時に自動的にブラウザでアプリを開きます。値が文字列の場合、URL のパス名として使用されます。もしあなたの好きなブラウザでアプリを開きたい場合、環境変数 process.env.BROWSER（例: firefox）を定義できます。詳細は open パッケージをご覧ください。

例:

export default defineConfig({
  server: {
    open: '/docs/index.html'
  }
})

server.proxy

型: Record<string, string | ProxyOptions>

開発サーバのカスタムプロキシのルールを設定します。{ key: options } のペアのオブジェクトが必要です。キーが ^ で始まる場合は RegExp として解釈されます。プロキシのインスタンスにアクセスするには configure オプションを使用します。

http-proxy を使用します。全オプションはこちら。

場合によっては、基盤となる開発サーバーを設定したいこともあるでしょう（例: 内部の connect アプリにカスタムミドルウェアを追加する場合など）。そのためには、独自の plugin を書き、configureServer 関数を使用する必要があります。

例:

export default defineConfig({
  server: {
    proxy: {
      // 文字列のショートハンド
      '/foo': 'http://localhost:4567',
      // オプションを使用
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正規表現を使用
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      },
      // プロキシインスタンスを使用
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // プロキシは 'http-proxy' のインスタンスになります
        },
      },
      // Web ソケット か socket.io をプロキシ化
      '/socket.io': {
        target: 'ws://localhost:5173',
        ws: true
      }
    }
  }
})

server.cors

型: boolean | CorsOptions

開発サーバの CORS を設定します。これはデフォルトで有効になっており、どんなオリジンも許可します。オプションオブジェクトを渡して微調整するか、false で無効にします。

server.headers

型: OutgoingHttpHeaders

サーバのレスポンスヘッダを指定します。

server.force

型: boolean
関連: 依存関係の事前バンドル

依存関係の事前バンドルを強制するには、true に設定します。

server.hmr

型: boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }

HMR 接続の無効化または設定（HMR WebSocket が http サーバと異なるアドレスを使用する必要がある場合）。

server.hmr.overlay を false に設定すると、サーバエラーのオーバレイが無効になります。

clientPort は、クライアント側のポートのみを上書きする高度なオプションで、クライアントコードが探すポートとは異なるポートで WebSocket を配信できます。開発サーバの前で SSL プロキシを使用している場合に便利です。

server.hmr.server を指定すると、Vite は指定されたサーバを通して HMR 接続要求を処理します。ミドルウェアモードでない場合、Vite は既存のサーバを通して HMR 接続要求を処理しようとします。これは、自己署名証明書を使用する場合や、Vite を単一ポートでネットワーク上に公開したい場合に役立ちます。

server.watch

型: object

chokidar に渡すファイルシステムウォッチャのオプションです。

Windows Subsystem for Linux (WSL) 2 上で Vite を実行している時に、プロジェクトフォルダが Windows ファイルシステム内にある場合は、このオプションを { usePolling: true } に設定する必要があります。これは、Windows ファイルシステムにおける WSL2 の制限によるものです。

Vite サーバのウォッチャは、デフォルトでは .git/ と node_modules/ ディレクトリをスキップします。もし node_modules/ 内のパッケージを監視したい場合は、server.watch.regard に否定の glob パターンを渡すことができます。つまり:

export default defineConfig({
  server: {
    watch: {
      ignored: ['!**/node_modules/your-package-name/**']
    }
  },
  // 監視するパッケージは、最適化から除外する必要があります。
  // これにより、依存関係グラフに現れ、ホットリロードをトリガーできるようになります。
  optimizeDeps: {
    exclude: ['your-package-name']
  }
})

server.middlewareMode

型: 'ssr' | 'html'

ミドルウェアモードで Vite サーバを作成します（HTTP サーバなし）。

'ssr' は Vite 自体の HTML 配信ロジックを無効にするため、index.html を手動で配信する必要があります。
'html' は Vite 自体の HTML 配信ロジックを有効にします。
関連: SSR - 開発サーバのセットアップ
例:

const express = require('express')
const { createServer: createViteServer } = require('vite')

async function createServer() {
  const app = express()

  // ミドルウェアモードで Vite サーバを作成します。
  const vite = await createViteServer({
    server: { middlewareMode: 'ssr' }
  })
  // vite の接続インスタンスをミドルウェアとして使用
  app.use(vite.middlewares)

  app.use('*', async (req, res) => {
    // `middlewareMode` が `'ssr'` の場合、ここで `index.html` を配信する必要があります。
    // `middlewareMode` が `'html'` の場合、Vite が配信するので
    // `index.html` を配信する必要はありません。
  })
}

createServer()

server.base

型: string | undefined

Vite をサブフォルダとしてプロキシする場合に使用するため、http リクエストの前にこのフォルダを追加します。最初と最後は / の文字にする必要があります。

server.fs.strict

型: boolean
デフォルト: true（Vite 2.7 以降、デフォルトで有効）

ワークスペースのルート以外のファイルの配信を制限します。

server.fs.allow

型: string[]

/@fs/ 経由で配信可能なファイルを制限します。server.fs.strict が true に設定されている場合、このディレクトリリストの外にある、許可されたファイルからインポートされていないファイルにアクセスすると、403 が返されます。

Vite は、潜在的なワークスペースのルートを検索し、それをデフォルトとして使用します。有効なワークスペースは以下の条件を満たすもので、そうでない場合はプロジェクトのルートにフォールバックします。

package.json に workspaces フィールドが含まれている
以下のファイルのいずれかを含んでいる
- lerna.json
- pnpm-workspace.yaml

カスタムワークスペースのルートを指定するパスを受け取ります。絶対パスか、プロジェクトのルートからの相対パスを指定します。例えば:

export default defineConfig({
  server: {
    fs: {
      // プロジェクトルートの 1 つ上の階層からファイルを配信できるようにする
      allow: ['..']
    }
  }
})

server.fs.allow を指定すると、ワークスペースルートの自動検出が無効になります。本来の動作を拡張するために、ユーティリティーの searchForWorkspaceRoot が公開されています:

import { defineConfig, searchForWorkspaceRoot } from 'vite'

export default defineConfig({
  server: {
    fs: {
      allow: [
        // ワークスペースルートの検索
        searchForWorkspaceRoot(process.cwd()),
        // あなたのカスタムルール
        '/path/to/custom/allow'
      ]
    }
  }
})

server.fs.deny

型: string[]

Vite 開発サーバでの配信が制限されている機密ファイルのブロックリスト。

デフォルトは ['.env', '.env.*', '*.{pem,crt}'] です。

server.origin

型: string

開発時に生成されるアセット URL のオリジンを定義します。

export default defineConfig({
  server: {
    origin: 'http://127.0.0.1:8080'
  }
})

サーバオプション #

server.host #

server.port #

server.strictPort #

server.https #

server.open #

server.proxy #

server.cors #

server.headers #

server.force #

server.hmr #

server.watch #

server.middlewareMode #

server.base #

server.fs.strict #

server.fs.allow #

server.fs.deny #

server.origin #