Manipulation des actifs statiques #

• Relié : Chemin de base public
• Voir aussi : Option de configuration assetsInclude

Importation d'un actif en tant qu'URL #

L'importation d'une ressource statique renverra l'URL publique résolue lorsqu'elle sera servie :

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

Par exemple, imgUrl sera /img.png pendant le développement, et deviendra /assets/img.2d8efhg.png dans la version de production.

Le comportement est similaire à celui du file-loader de webpack. La différence est que l'importation peut se faire en utilisant des chemins publics absolus (basés sur la racine du projet pendant le développement) ou des chemins relatifs.

• Les références url() dans les CSS sont traitées de la même manière.

• Si vous utilisez le plugin Vue, les références aux ressources dans les modèles SFC Vue sont automatiquement converties en importations.

• Les types de fichiers courants d'images, de médias et de polices sont détectés automatiquement comme des ressources. Vous pouvez étendre la liste interne en utilisant l'option [assetsInclude] (/config/shared-options.md#assetsinclude).

• Les actifs référencés sont inclus dans le graphe des actifs de construction, obtiendront des noms de fichiers hachés, et peuvent être traités par des plugins pour l'optimisation.

• Les ressources dont la taille en octets est inférieure à l'option assetsInlineLimit seront intégrées en tant qu'URL de données base64.

• Les placeholders LFS de Git sont automatiquement exclus de l'inlining car ils ne contiennent pas le contenu du fichier qu'ils représentent. Pour obtenir l'inlining, assurez-vous de télécharger le contenu du fichier via Git LFS avant de le construire.

Importations d'URL explicites #

Les actifs qui ne sont pas inclus dans la liste interne ou dans assetsInclude, peuvent être explicitement importés comme une URL en utilisant le suffixe ?url. Ceci est utile, par exemple, pour importer Houdini Paint Worklets.

import workletURL from 'extra-scalloped-border/worklet.js?url'
CSS.paintWorklet.addModule(workletURL)

Importation d'un actif sous forme de chaîne #

Les ressources peuvent être importées sous forme de chaînes en utilisant le suffixe ?raw.

import shaderString from './shader.glsl?raw'

Importer un script en tant que travailleur #

Les scripts peuvent être importés en tant que workers web avec le suffixe ?worker ou ?sharedworker.

// Morceau séparé dans le build de production
import Worker from './shader.js?worker'
const worker = new Worker()

// sharedworker
import SharedWorker from './shader.js?sharedworker'
const sharedWorker = new SharedWorker()

// Inline en tant que chaînes de caractères base64
import InlineWorker from './shader.js?worker&inline'

Consultez la section [Web Worker] (./features.md#web-workers) pour plus de détails.

Le répertoire `public #

Si vous avez des ressources qui sont :

• Ne sont jamais référencées dans le code source (par exemple, robots.txt)
• Doivent conserver exactement le même nom de fichier (sans hachage)
• ...ou vous ne voulez tout simplement pas avoir à importer une ressource juste pour obtenir son URL.

Ensuite, vous pouvez placer la ressource dans un répertoire spécial public sous la racine de votre projet. Les ressources de ce répertoire seront servies à la racine du chemin / pendant le développement, et copiées telles quelles à la racine du répertoire de distribution.

Le répertoire par défaut est <root>/public, mais peut être configuré via l'option publicDir.

Notez que :

• Vous devez toujours référencer les actifs public en utilisant le chemin absolu de la racine - par exemple, public/icon.png doit être référencé dans le code source comme /icon.png.
• Les ressources de public ne peuvent pas être importées depuis JavaScript.

nouvelle URL(url, import.meta.url) #

import.meta.url est une fonctionnalité native d'ESM qui expose l'URL du module actuel. En la combinant avec le [constructeur d'URL] natif (https://developer.mozilla.org/en-US/docs/Web/API/URL), nous pouvons obtenir l'URL complète et résolue d'une ressource statique en utilisant le chemin relatif d'un module JavaScript :

const imgUrl = new URL('./img.png', import.meta.url).href

document.getElementById('hero-img').src = imgUrl

Cela fonctionne nativement dans les navigateurs modernes - en fait, Vite n'a pas besoin de traiter ce code du tout pendant le développement !

Ce modèle prend également en charge les URL dynamiques via les littéraux des modèles :

function getImageUrl(name) {
  return new URL(`./dir/${name}.png`, import.meta.url).href
}

Pendant la construction de production, Vite effectuera les transformations nécessaires pour que les URLs pointent toujours vers le bon emplacement même après le regroupement et le hachage des ressources. Cependant, la chaîne URL doit être statique pour pouvoir être analysée, sinon le code sera laissé tel quel, ce qui peut provoquer des erreurs d'exécution si build.target ne supporte pas import.meta.url.

// Vite ne transformera pas ceci
const imgUrl = new URL(imagePath, import.meta.url).href