Intégration du backend #

1. Dans votre configuration Vite, configurez l'entrée et activez le manifeste de construction :

   js

   // vite.config.js
   export default defineConfig({
     build : {
       // génère manifest.json dans outDir
       manifest : true,
       rollupOptions : {
         // écrase l'entrée .html par défaut
         input : '/path/to/main.js'
       }
     }
   })
   

   Si vous n'avez pas désactivé le [module preload polyfill] (/config/build-options.md#build-polyfillmodulepreload), vous devez également importer le polyfill dans votre entrée.

   js

   // ajoutez le début de l'entrée de votre application
   import 'vite/modulepreload-polyfill'
   

2. Pour le développement, injectez ce qui suit dans le modèle HTML de votre serveur (remplacez http://localhost:5173 par l'URL locale où Vite est exécuté) :

   html

   <!-- si développement -->
   <script type="module" src="http://localhost:5173/@vite/client"></script>
   <script type="module" src="http://localhost:5173/main.js"></script>
   

   Afin de servir correctement les actifs, vous avez deux options :

   • S'assurer que le serveur est configuré pour que les requêtes de ressources statiques soient envoyées par proxy au serveur Vite.
   • Définissez server.origin pour que les URLs des ressources générées soient résolues en utilisant l'URL du serveur back-end au lieu d'un chemin relatif.

   Ceci est nécessaire pour que les ressources telles que les images se chargent correctement.

   Notez que si vous utilisez React avec @vitejs/plugin-react, vous devrez également ajouter ceci avant les scripts ci-dessus, puisque le plugin n'est pas capable de modifier le HTML que vous servez :

   html

   <script type="module">
     import RefreshRuntime from 'http://localhost:5173/@react-refresh'
     RefreshRuntime.injectIntoGlobalHook(fenêtre)
     window.$RefreshReg$ = () => {}
     window.$RefreshSig$ = () => (type) => type
     window.__vite_plugin_react_preamble_installed__ = true
   </script>
   

3. Pour la production : après avoir exécuté vite build, un fichier manifest.json sera généré avec d'autres fichiers de ressources. Un exemple de fichier manifest ressemble à ceci :

   json

   {
     "main.js" : {
       "file" : "assets/main.4889e940.js",
       "src" : "main.js",
       "isEntry" : true,
       "dynamicImports" : ["views/foo.js"],
       "css" : ["assets/main.b82dbe22.css"],
       "assets" : ["assets/asset.0ab0f9cd.png"]
     },
     "views/foo.js" : {
       "file" : "assets/foo.869aea0d.js",
       "src" : "views/foo.js",
       "isDynamicEntry" : true,
       "imports" : ["_shared.83069a53.js"]
     },
     "_shared.83069a53.js": {
       "file" : "assets/shared.83069a53.js"
     }
   }
   

   • Le manifeste a une structure Record<name, chunk>.
   • Pour les morceaux d'entrée ou d'entrée dynamique, la clé est le chemin src relatif depuis la racine du projet.
   • Pour les chunks sans entrée, la clé est le nom de base du fichier généré, préfixé par _.
   • Les chunks contiennent des informations sur leurs importations statiques et dynamiques (les deux sont des clés qui correspondent au chunk correspondant dans le manifeste), ainsi que sur les fichiers CSS et les fichiers d'actifs correspondants (le cas échéant).

   Vous pouvez utiliser ce fichier pour rendre des liens ou précharger des directives avec des noms de fichiers hachés (note : la syntaxe ici est pour l'explication seulement, substituer avec votre langage de templating de serveur) :

   html

   <!-- si production -->
   <link rel="stylesheet" href="/assets/{{ manifest['main.js'].css }}" />
   <script type="module" src="/assets/{ manifest['main.js'].file }}"></script>