Configurer Vite #

Lorsque vous lancez vite depuis la ligne de commande, Vite essaiera automatiquement de résoudre un fichier de configuration nommé vite.config.js à l'intérieur de la racine du projet.

Le fichier de configuration le plus basique ressemble à ceci :

``js // vite.config.js export default { // options de configuration }

Notez que Vite supporte l'utilisation de la syntaxe des modules ES dans le fichier de configuration même si le projet n'utilise pas l'ESM natif de Node, par exemple `type : "module"``dans `package.json`. Dans ce cas, le fichier de configuration est auto prétraité avant le chargement.

Vous pouvez également spécifier explicitement un fichier de configuration à utiliser avec l'option CLI `--config` (résolue relativement à `cwd`) :

``bash
vite --config mon-config.js

Config Intellisense #

Puisque Vite est livré avec les typages TypeScript, vous pouvez utiliser l'intellisense de votre IDE avec les indications de type jsdoc :

/** @type {import('vite').UserConfig} */
export default {
  // ...
}

Alternativement, vous pouvez utiliser l'aide defineConfig qui devrait fournir intellisense sans avoir besoin d'annotations jsdoc :

Importez { defineConfig } de 'vite'.

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

Vite supporte aussi directement les fichiers de configuration TS. Vous pouvez utiliser vite.config.ts avec l'aide defineConfig également.

Configuration conditionnelle #

Si le config a besoin de déterminer conditionnellement des options basées sur la commande (dev/serve ou build), le mode utilisé, ou si c'est un build SSR (ssrBuild), il peut exporter une fonction à la place :

``js export default defineConfig(({commande, mode, ssrBuild }) => { if (command === 'serve') { return { // configuration spécifique au développement } } else { // commande === 'build return { // configuration spécifique à la construction } } })

Il est important de noter que dans l'API de Vite la valeur de `command` est `serve` pendant le dev (dans la cli `vite`, `vite dev`, et `vite serve` sont des alias), et `build` lors de la construction pour la production (`vite build`).

`ssrBuild` est expérimental. Il n'est disponible que pendant la construction au lieu d'un drapeau plus général `ssr` parce que, pendant le développement, la configuration est partagée par le serveur unique qui traite les demandes SSR et non-SSR. La valeur peut être `undefined` pour les outils qui n'ont pas de commandes séparées pour le navigateur et le build SSR, donc utilisez une comparaison explicite avec `true` et `false`.

## Configuration asynchrone

Si la configuration doit appeler une fonction asynchrone, elle peut exporter une fonction asynchrone à la place :

``js
export default defineConfig(async ({ command, mode }) => {
  const data = await asyncFunction()
  return {
    // vite config
  }
})

Variables d'environnement #

Les variables d'environnement peuvent être obtenues à partir de process.env comme d'habitude.

Notez que Vite ne charge pas les fichiers .env par défaut car les fichiers à charger ne peuvent être déterminés qu'après évaluation de la configuration de Vite, par exemple, les options root et envDir affectent le comportement de chargement. Cependant, vous pouvez utiliser l'aide exportée loadEnv pour charger le fichier .env spécifique si nécessaire.

Importez { defineConfig, loadEnv } de 'vite'.

export default defineConfig(({ command, mode }) => {
  // Charge le fichier env en fonction de `mode` dans le répertoire de travail actuel.
  // Définissez le troisième paramètre à '' pour charger tous les fichiers env sans tenir compte du préfixe `VITE_`.
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // configuration vite
    définir : {
      __APP_ENV__ : env.APP_ENV
    }
  }
})