diff --git a/fr/guide/assets.md b/fr/guide/assets.md new file mode 100644 index 000000000..eab12e70c --- /dev/null +++ b/fr/guide/assets.md @@ -0,0 +1,98 @@ +--- +title: Assets +description: Nuxt utilise vue-loader, file-loader et url-loader avec Webpack par défaut pour un servir les fichiers statiques, mais vous pouvez également utiliser le répertoire "Static" pour les fichiers statiques. +--- + +> Nuxt utilise vue-loader, file-loader et url-loader avec Webpack par défaut pour un servir les fichiers statiques, mais vous pouvez également utiliser le répertoire "Static" pour les fichiers statiques. + +## Avec Webpack + +Par défaut, [vue-loader](http://vue-loader.vuejs.org/en/) traite automatiquement vos fichiers de style et vos templates à l'aide de `css-loader` et du compilatuer de template de Vue. Dans ce processus de compilation, toutes les URLs des fichiers comme ``, `background: url(...)` et le CSS `@import` sont résolues en tant que dépendances des modules. + +Par exemple, avec cette arborescence: + +```bash +-| assets/ +----| image.png +-| pages/ +----| index.vue +``` + +Dans notre CSS, si nous utilisons `url('~assets/image.png')`, ce sera transformé en `require('~assets/image.png')`. + +Ou si dans `pages/index.vue` nous utilisons: +```html + +``` + +Ce sera compilé en: + +```js +createElement('img', { attrs: { src: require('~assets/image.png') }}) +``` + +Puisque que les fichiers `.png` ne sont pas des fichiers JavaScript, nuxt.js configure Webpack afin d'utiliser [file-loader](https://github.com/webpack/file-loader) et [url-loader](https://github.com/webpack/url-loader) afin de pouvoir s'en charger. + +Leurs avantages sont: +- `file-loader` vous laisse définir ou copier les assets, comment les nommer et vous permets d'utiliser des hash de version pour un meilleur cache. +- `url-loader` vous permet d'insérer de façon conditionnelle un fichier en tant qu'URL encodée en base 64 si sa taille est inférieure à un seuil donné. Cela peut réduire un certain nombre de demandes HTTP pour les fichiers triviaux. Si la taille du fichier est supérieur au seuil, il retombe automatiquement sur `file-loader`. + +Actuellement, la configuration des loaders par défaut de Nuxt.js est la suivante: + +```js +[ + { + test: /\.(png|jpe?g|gif|svg)$/, + loader: 'url-loader', + query: { + limit: 1000, // 1KO + name: 'img/[name].[hash:7].[ext]' + } + }, + { + test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, + loader: 'url-loader', + query: { + limit: 1000, // 1KO + name: 'fonts/[name].[hash:7].[ext]' + } + } +] +``` + +Ce qui signifie que tous les fichiers inférieurs à 1KO seront intégrés comme URL base-64. Sinon, l'image/police sera copiée dans son dossier correspondant (dans le répertoire `.nuxt`) avec un nom contenant des hach de version pour une meilleure mise en cache. + +Lors du lancement de notre application avec `nuxt`, notre modèle dans` pages/index.vue`: + +```html + +``` + +Sera transformé en: +```html + +``` + +Si vous désirez modifier ou désactiver ces loaders, regarder la [documentation sur les loaders](/api/configuration-build#loaders). + +## Static + +Si vous ne souhaitez pas utiliser les assets à l'aide de Webpack à partir du répertoire `assets`, vous pouvez créer et utiliser le répertoire` static` dans le répertoire racine du projet. + +Ces fichiers seront automatiquement servis par Nuxt et accessibles via l'URL racine du projet. + +Cette option est utile pour les fichiers tels que `robots.txt`,` sitemap.xml` ou `CNAME` (pour GitHub Pages et autres). + +À partir de votre code, vous pouvez ensuite référencer ces fichiers avec de URLs commencant par `/`: + +```html + + + + + +```