Options du serveur

server.host

Type: string | boolean
Défaut: `'localhost'``

Indique les adresses IP sur lesquelles le serveur doit écouter. Donnez-lui la valeur 0.0.0.0 ou true pour écouter toutes les adresses, y compris les adresses publiques et de réseau local.

Ceci peut être défini via l'interface CLI en utilisant --host 0.0.0.0 ou --host.

NOTE :: : conseil

Il existe des cas où d'autres serveurs peuvent répondre à la place de Vite.

Le premier cas est lorsque localhost est utilisé. Node.js sous la v17 réordonne par défaut le résultat des adresses résolues par DNS. Lors de l'accès à localhost, les navigateurs utilisent le DNS pour résoudre l'adresse et cette adresse peut être différente de l'adresse sur laquelle Vite écoute. Vite imprime l'adresse résolue lorsqu'elle diffère.

Vous pouvez définir dns.setDefaultResultOrder('verbatim') pour désactiver le comportement de réordonnancement. Vite imprimera alors l'adresse comme localhost.

// vite.config.js
import { defineConfig } from 'vite'.
import dns from 'dns'.

dns.setDefaultResultOrder('verbatim')

export default defineConfig({
  // omettre
})

Le second cas est celui de l'utilisation d'hôtes avec caractères génériques (par exemple 0.0.0.0). Cela s'explique par le fait que les serveurs qui écoutent sur des hôtes sans caractères génériques sont prioritaires par rapport à ceux qui écoutent sur des hôtes génériques.

:: :

server.port

Type:** numéro
Défaut: 5173

Spécifie le port du serveur. Notez que si le port est déjà utilisé, Vite essaiera automatiquement le prochain port disponible. Il se peut donc que ce ne soit pas le port sur lequel le serveur finira par écouter.

server.strictPort

Type:** "booléen".

Défini à true pour quitter si le port est déjà utilisé, au lieu d'essayer automatiquement le prochain port disponible.

server.https

Type: boolean | https.ServerOptions

Activer TLS + HTTP/2. Notez que cela ne rétrograde vers TLS que si l'option server.proxy est également utilisée.

La valeur peut aussi être un objet options passé à https.createServer().

Un certificat valide est nécessaire. Pour une configuration de base, vous pouvez ajouter @vitejs/plugin-basic-ssl aux plugins du projet, ce qui créera automatiquement et mettra en cache un certificat auto-signé. Mais nous vous recommandons de créer vos propres certificats.

server.open

Type: boolean | string

Ouvre automatiquement l'application dans le navigateur au démarrage du serveur. Si la valeur est une chaîne, elle sera utilisée comme chemin d'accès à l'URL. Si vous voulez ouvrir le serveur dans un navigateur spécifique que vous aimez, vous pouvez définir l'env process.env.BROWSER (par exemple firefox). Voir le paquet open pour plus de détails.

Exemple:

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

serveur.proxy

Type: Record<string, string | ProxyOptions>

Configure les règles de proxy personnalisées pour le serveur de développement. Attend un objet de paires {key : options }. Si la clé commence par ^, elle sera interprétée comme un RegExp. L'option configure peut être utilisée pour accéder à l'instance du proxy.

Utilise http-proxy. Options complètes ici.

Dans certains cas, vous pouvez également vouloir configurer le serveur de développement sous-jacent (par exemple, pour ajouter des intergiciels personnalisés à l'application interne connect). Pour ce faire, vous devez écrire votre propre plugin et utiliser la fonction configureServer.

Exemple:

export default defineConfig({
  serveur : {
    proxy : {
      // raccourci de chaîne de caractères
      /foo' : 'http://localhost:4567',
      // avec options
      /api' : {
        cible : 'http://jsonplaceholder.typicode.com',
        changeOrigin : true,
        rewrite : (path) => path.replace(/^\/api/, '')
      },
      // avec RegEx
      '^/fallback/.*' : {
        cible : 'http://jsonplaceholder.typicode.com',
        changeOrigin : true,
        rewrite : (path) => path.replace(/^\/fallback/, '')
      },
      // Utilisation de l'instance de proxy
      '/api' : {
        target : 'http://jsonplaceholder.typicode.com',
        changeOrigin : true,
        configure : (proxy, options) => {
          // Le proxy sera une instance from 'http-proxy'.
        }
      },
      // Proxy des websockets ou socket.io
      '/socket.io' : {
        target : 'ws://localhost:5173',
        ws : true
      }
    }
  }
})

server.cors

Type: boolean | CorsOptions

Configure CORS pour le serveur de développement. Cette option est activée par défaut et autorise toute origine. Passez un objet options pour affiner le comportement ou false pour le désactiver.

server.headers

Type: OutgoingHttpHeaders

Spécifier les en-têtes de réponse du serveur.

server.hmr

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

Désactiver ou configurer la connexion HMR (dans les cas où la websocket HMR doit utiliser une adresse différente de celle du serveur http).

Définissez server.hmr.overlay à false pour désactiver la superposition des erreurs du serveur.

clientPort est une option avancée qui remplace le port uniquement du côté client, vous permettant de servir la websocket sur un port différent de celui sur lequel le code client la recherche.

Lorsque server.hmr.server est défini, Vite traitera les demandes de connexion HMR à travers le serveur fourni. S'il n'est pas en mode intergiciel, Vite tentera de traiter les demandes de connexion HMR par le biais du serveur existant. Cela peut être utile lors de l'utilisation de certificats auto-signés ou lorsque vous souhaitez exposer Vite sur un réseau sur un seul port.

Consultez vite-setup-catalogue pour quelques exemples.

:: : NOTE DE CONSEIL

Avec la configuration par défaut, les reverse proxies en face de Vite doivent supporter le proxys WebSocket. Si le client Vite HMR ne parvient pas à se connecter à WebSocket, le client se rabattra sur la connexion WebSocket directement au serveur Vite HMR en contournant les proxies inversés :

Repli de la connexion WebSocket directe. Consultez https://vitejs.dev/config/server-options.html#server-hmr pour supprimer l'erreur de connexion précédente.

L'erreur qui s'affiche dans le navigateur lorsque le repli se produit peut être ignorée. Pour éviter l'erreur en contournant directement les reverse proxies, vous pouvez soit :

configurer le mandataire inverse de manière à ce qu'il utilise également WebSocket comme mandataire
définir server.strictPort = true et définir server.hmr.clientPort à la même valeur que server.port.
donnez à server.hmr.port une valeur différente de server.port

:: :

server.watch

Type: objet

Options de surveillance du système de fichiers à transmettre à chokidar.

L'observateur du serveur Vite ignore les répertoires .git/ et node_modules/ par défaut. Si vous voulez surveiller un paquet dans node_modules/, vous pouvez passer un motif glob négatif à server.watch.ignored. C'est-à-dire :

export default defineConfig({
  serveur : {
    watch : {
      ignoré : ['!**/node_modules/votre-nom-de-package/**']
    }
  },
  // Le paquet surveillé doit être exclu de l'optimisation,
  // pour qu'il puisse apparaître dans le graphe des dépendances et déclencher un rechargement à chaud.
  optimizeDeps : {
    exclure : ['votre-nom-de-paquet']
  }
})

:: : avertissement Utilisation de Vite sur Windows Subsystem for Linux (WSL) 2

Lorsque vous utilisez Vite sur WSL2, la surveillance du système de fichiers ne fonctionne pas lorsqu'un fichier est édité par des applications Windows (processus non WSL2). Ceci est dû à [une limitation de WSL2] (https://github.com/microsoft/WSL/issues/4739). Cela s'applique également à l'exécution sur Docker avec un backend WSL2.

Pour résoudre ce problème, vous pouvez soit :

Recommandé : Utiliser des applications WSL2 pour éditer vos fichiers.
- Il est également recommandé de déplacer le dossier du projet en dehors d'un système de fichiers Windows. Accéder au système de fichiers Windows depuis WSL2 est lent. La suppression de cette surcharge améliorera les performances.
Définissez { usePolling : true }.
- Notez que [``usePolling`' entraîne une utilisation élevée du CPU] (https://github.com/paulmillr/chokidar#performance).

:: :

server.middlewareMode

Type:** boolean
Défaut: false

Crée le serveur Vite en mode middleware.

Relié: appType, SSR - Configuration du serveur de développement
Exemple:

Importation de express from 'express'.
import { createServer as createViteServer } from 'vite'.

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

  // Création du serveur Vite en mode middleware
  const vite = await createViteServer({
    serveur : { middlewareMode : true },
    appType : 'custom' // Ne pas inclure les intergiciels de gestion HTML par défaut de Vite.
  })
  // Utiliser l'instance connect de vite comme middleware
  app.use(vite.middlewares)

  app.use('*', async (req, res) => {
    // Puisque `appType` est `'custom'`, il faut servir la réponse ici.
    // Note : si le type de l'application est "spa" ou "mpa", Vite inclut des intergiciels pour gérer les requêtes HTML et 404.
    // les requêtes HTML et les 404s, donc les intergiciels des utilisateurs doivent être ajoutés
    // avant que les middlewares de Vite ne prennent effet à la place.
  })
}

createServer()

server.base

Type: string | undefined

Prépare ce dossier pour les requêtes http, à utiliser lors de l'utilisation de vite comme sous-dossier. Doit commencer et se terminer par le caractère /.

server.fs.strict

Type: boolean
Défaut: true (activé par défaut depuis Vite 2.7)

Limite le service des fichiers en dehors de la racine de l'espace de travail.

server.fs.allow

Type: string[]

Restreint les fichiers qui pourraient être servis via /@fs/. Lorsque server.fs.strict a pour valeur true, l'accès à des fichiers situés en dehors de cette liste de répertoires et qui ne sont pas importés d'un fichier autorisé entraînera un 403.

Vite recherchera la racine de l'espace de travail potentiel et l'utilisera par défaut. Un espace de travail valide répond aux conditions suivantes, sinon il se rabattra sur la [racine du projet] (/guide/#index-html-and-project-root).

contient le champ workspaces dans le fichier package.json.
contient l'un des fichiers suivants
- lerna.json
- pnpm-workspace.yaml

Accepte un chemin pour spécifier la racine de l'espace de travail personnalisé. Il peut s'agir d'un chemin absolu ou d'un chemin relatif à la [racine du projet] (/guide/#index-html-and-project-root). Par exemple :

export default defineConfig({
  serveur : {
    fs : {
      // Permet de servir les fichiers d'un niveau supérieur à la racine du projet.
      allow : ['..']
    }
  }
})

Lorsque server.fs.allow est spécifié, la détection automatique de la racine de l'espace de travail sera désactivée. Pour étendre le comportement original, un utilitaire searchForWorkspaceRoot est exposé :

import { defineConfig, searchForWorkspaceRoot } from 'vite'.

export default defineConfig({
  serveur : {
    fs : {
      allow : [
        // recherche de la racine de l'espace de travail
        searchForWorkspaceRoot(process.cwd()),
        // vos règles personnalisées
        /path/to/custom/allow'
      ]
    }
  }
})

server.fs.deny

Type: string[]
Default: `['.env', '.env.', '.{pem,crt}']``

Liste de blocage pour les fichiers sensibles dont l'accès au serveur Vite dev est restreint. Cette liste aura une priorité plus élevée que server.fs.allow. Les picomatch patterns sont supportés.

server.origin

Type: string

Définit l'origine des URLs de ressources générées pendant le développement.

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

Options du serveur #

server.host #

server.port #

server.strictPort #

server.https #

server.open #

serveur.proxy #

server.cors #

server.headers #

server.hmr #

server.watch #

server.middlewareMode #

server.base #

server.fs.strict #

server.fs.allow #

server.fs.deny #

server.origin #

Options du serveur

server.host

server.port

server.strictPort

server.https

server.open

serveur.proxy

server.cors

server.headers

server.hmr

server.watch

server.middlewareMode

server.base

server.fs.strict

server.fs.allow

server.fs.deny

server.origin