From d6d4991ddd27e9093cc50149e949cf36dc077587 Mon Sep 17 00:00:00 2001 From: carlleton Date: Sun, 17 Sep 2017 22:18:13 +0800 Subject: [PATCH 1/7] Update configuration.md --- zh/guide/configuration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/zh/guide/configuration.md b/zh/guide/configuration.md index 094bf4e9d..e68a987b8 100644 --- a/zh/guide/configuration.md +++ b/zh/guide/configuration.md @@ -61,7 +61,7 @@ Nuxt.js 允许你在自动生成的 `vendor.bundle.js` 文件中添加一些模 ### rootDir -该配置项用于配置 Next.js 应用的根目录。 +该配置项用于配置 Nuxt.js 应用的根目录。 [关于 rootDir 配置项的详细文档](/api/configuration-rootdir) From 22d8e25a015cbf9941a700c3ad0992c50b30fc29 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 18 Sep 2017 15:37:08 +0200 Subject: [PATCH 2/7] Revue assets.md Signed-off-by: Bruno Lesieur --- en/guide/assets.md | 64 +++++++++++++++++++++++----------------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/en/guide/assets.md b/en/guide/assets.md index c463f09c6..1418bf31e 100644 --- a/en/guide/assets.md +++ b/en/guide/assets.md @@ -1,15 +1,15 @@ --- -title: Assets -description: Nuxt uses vue-loader, file-loader and url-loader for Webpack by default for strong assets serving, but you can also use Static directory for static assets. +title: Ressources +description: Nuxt utilise vue-loader, file-loader et url-loader avec webpack par défaut pour servir les fichiers statiques mais vous pouvez également utiliser un répertoire `static` pour les fichiers statiques. --- -> Nuxt uses vue-loader, file-loader and url-loader for Webpack by default for strong assets serving, but you can also use Static directory for static assets. +> Nuxt utilise vue-loader, file-loader et url-loader avec webpack par défaut pour servir les fichiers statiques mais vous pouvez également utiliser un répertoire `static` pour les fichiers statiques. -## Webpacked +## Avec webpack -By default, [vue-loader](http://vue-loader.vuejs.org/en/) automatically processes your style and template files with `css-loader` and the Vue template compiler. In this compilation process, all asset URLs such as ``, `background: url(...)` and CSS `@import` are resolved as module dependencies. +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 compilateur de template de Vue. Dans ce processus de compilation, toutes les URL des fichiers comme ``, `background: url(...)` et les CSS `@import` sont résolus en tant que dépendances des modules. -For example, we have this file tree: +Imaginons par exemple cette arborescence : ```bash -| assets/ @@ -18,28 +18,28 @@ For example, we have this file tree: ----| index.vue ``` -In my CSS, if I use `url('~/assets/image.png')`, it will be translated into `require('~/assets/image.png')`. +Dans votre CSS, si nous utilisons `url('~assets/image.png')`, ce sera transformé en `require('~assets/image.png')`. -Or if in my `pages/index.vue`, I use: +Ou si dans `pages/index.vue` vous utilisez : ```html ``` -It will be compiled into: +Ce sera compilé en : ```js -createElement('img', { attrs: { src: require('~/assets/image.png') }}) +createElement('img', { attrs: { src: require('~assets/image.png') }}) ``` -Because `.png` is not a JavaScript file, nuxt.js configures Webpack to use [file-loader](https://github.com/webpack/file-loader) and [url-loader](https://github.com/webpack/url-loader) to handle them for you. +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. -The benefits of them are: -- `file-loader` lets you designate where to copy and place the asset file, and how to name it using version hashes for better caching. -- `url-loader` allows you to conditionally inline a file as base-64 data URL if they are smaller than a given threshold. This can reduce a number of HTTP requests for trivial files. If the file is larger than the threshold, it automatically falls back to `file-loader`. +Leurs avantages sont: +- file-loader vous laisse définir ou copier les ressources, comment les nommer et vous permet d'utiliser des hashs de version pour un meilleur cache. +- url-loader vous permet d'insérer de façon conditionnelle un fichier en tant qu'URL encodé 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. -Actually, Nuxt.js default assets loaders configuration is: +Actuellement, la configuration des loaders par défaut de Nuxt.js est la suivante : ```js [ @@ -55,44 +55,44 @@ Actually, Nuxt.js default assets loaders configuration is: test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', query: { - limit: 1000, // 1 KO + limit: 1000, // 1KO name: 'fonts/[name].[hash:7].[ext]' } } ] ``` -Which means that every file below 1 KO will be inlined as base-64 data URL. Otherwise, the image/font will be copied in its corresponding folder (under the `.nuxt` directory) with a name containing a version hashes for better caching. +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 hashs de version pour une meilleure mise en cache. -When launching our application with `nuxt`, our template in `pages/index.vue`: +Lors du lancement de notre application avec `nuxt`, notre modèle dans `pages/index.vue` : ```html ``` -Will be generated into: +Sera transformé en: ```html ``` -If you want to update these loaders or disable them, please use [build.extend](/api/configuration-build#extend). +Si vous désirez modifier ou désactiver ces loaders, consultez la documentation sur [La propriété `extend`](/api/configuration-build#extend). -## Static +## Avec des fichiers statiques -If you don't want to use Webpacked Assets from the `assets` directory, you can create and use the `static` directory in your project root directory. +Si vous ne souhaitez pas utiliser les ressources à 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. -These files will be automatically serve by Nuxt and accessible in your project root URL. +Ces fichiers seront automatiquement servis par Nuxt et accessibles via l'URL racine du projet. -This option is helpful for files like `robots.txt`, `sitemap.xml` or `CNAME` (for like GitHub Pages). +Cette option est utile pour les fichiers tels que `robots.txt`, `sitemap.xml` ou `CNAME` (pour les pages hébergées sur GitHub par ex.). -From your code you can then reference those files with `/` URLs: +À partir de votre code vous pouvez ensuite référencer ces fichiers avec de URL commencant par `/` : ```html - - -~ - - + + + + + ``` From f6645f0a7f2194377d6434532838b085704dc521 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 18 Sep 2017 15:47:09 +0200 Subject: [PATCH 3/7] Consistence Signed-off-by: Bruno Lesieur --- en/guide/assets.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/en/guide/assets.md b/en/guide/assets.md index 1418bf31e..dc36fec69 100644 --- a/en/guide/assets.md +++ b/en/guide/assets.md @@ -18,7 +18,7 @@ Imaginons par exemple cette arborescence : ----| index.vue ``` -Dans votre CSS, si nous utilisons `url('~assets/image.png')`, ce sera transformé en `require('~assets/image.png')`. +Dans votre CSS, si nous utilisons `url('~/assets/image.png')`, ce sera transformé en `require('~/assets/image.png')`. Ou si dans `pages/index.vue` vous utilisez : ```html @@ -30,7 +30,7 @@ Ou si dans `pages/index.vue` vous utilisez : Ce sera compilé en : ```js -createElement('img', { attrs: { src: require('~assets/image.png') }}) +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. @@ -55,7 +55,7 @@ Actuellement, la configuration des loaders par défaut de Nuxt.js est la suivant test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', query: { - limit: 1000, // 1KO + limit: 1000, // 1ko name: 'fonts/[name].[hash:7].[ext]' } } @@ -68,7 +68,7 @@ Lors du lancement de notre application avec `nuxt`, notre modèle dans `pages/in ```html ``` From 4032beead52dbbeffb1f09fb9b16e9395c6a10eb Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 18 Sep 2017 16:49:45 +0200 Subject: [PATCH 4/7] Relecture de @rspt Signed-off-by: Bruno Lesieur --- en/guide/assets.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/en/guide/assets.md b/en/guide/assets.md index dc36fec69..211d72af8 100644 --- a/en/guide/assets.md +++ b/en/guide/assets.md @@ -7,7 +7,7 @@ description: Nuxt utilise vue-loader, file-loader et url-loader avec webpack par ## 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 compilateur de template de Vue. Dans ce processus de compilation, toutes les URL des fichiers comme ``, `background: url(...)` et les CSS `@import` sont résolus en tant que dépendances des modules. +Par défaut, [vue-loader](http://vue-loader.vuejs.org/en/) traite automatiquement vos fichiers de styles et vos templates à l'aide de `css-loader` et du compilateur de template de Vue. Dans ce processus de compilation, toutes les URL des fichiers comme ``, `background: url(...)` et les CSS `@import` sont résolus en tant que dépendances des modules. Imaginons par exemple cette arborescence : @@ -87,7 +87,7 @@ Ces fichiers seront automatiquement servis par Nuxt et accessibles via l'URL rac Cette option est utile pour les fichiers tels que `robots.txt`, `sitemap.xml` ou `CNAME` (pour les pages hébergées sur GitHub par ex.). -À partir de votre code vous pouvez ensuite référencer ces fichiers avec de URL commencant par `/` : +À partir de votre code vous pouvez ensuite référencer ces fichiers avec un URL commencant par `/` : ```html From 38b0541fba4784251b6729cb3deaa348b57f80d1 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 18 Sep 2017 16:51:30 +0200 Subject: [PATCH 5/7] =?UTF-8?q?Taille=20sup=C3=A9rieure=20!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Bruno Lesieur --- en/guide/assets.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/guide/assets.md b/en/guide/assets.md index 211d72af8..019803a24 100644 --- a/en/guide/assets.md +++ b/en/guide/assets.md @@ -37,7 +37,7 @@ Puisque que les fichiers `.png` ne sont pas des fichiers JavaScript, Nuxt.js con Leurs avantages sont: - file-loader vous laisse définir ou copier les ressources, comment les nommer et vous permet d'utiliser des hashs de version pour un meilleur cache. -- url-loader vous permet d'insérer de façon conditionnelle un fichier en tant qu'URL encodé 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. +- url-loader vous permet d'insérer de façon conditionnelle un fichier en tant qu'URL encodé 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érieure au seuil, il retombe automatiquement sur file-loader. Actuellement, la configuration des loaders par défaut de Nuxt.js est la suivante : From ac2daf0d73cbfbbd77e8668f14c0e534f37d9dd4 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 18 Sep 2017 17:28:05 +0200 Subject: [PATCH 6/7] =?UTF-8?q?La=20propri=C3=A9t=C3=A9=20`build`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Bruno Lesieur --- en/guide/assets.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/guide/assets.md b/en/guide/assets.md index 019803a24..0175add84 100644 --- a/en/guide/assets.md +++ b/en/guide/assets.md @@ -77,7 +77,7 @@ Sera transformé en: ``` -Si vous désirez modifier ou désactiver ces loaders, consultez la documentation sur [La propriété `extend`](/api/configuration-build#extend). +Si vous désirez modifier ou désactiver ces loaders, consultez la documentation sur [la propriété `extend` de la page La propriété `build`](/api/configuration-build#extend). ## Avec des fichiers statiques From a22d889fbf8a15b8b0ef2bd9fb6796b21526ae85 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Wed, 20 Sep 2017 09:00:47 +0200 Subject: [PATCH 7/7] Revue de @forresst Signed-off-by: Bruno Lesieur --- en/guide/assets.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/en/guide/assets.md b/en/guide/assets.md index 0175add84..96ac50092 100644 --- a/en/guide/assets.md +++ b/en/guide/assets.md @@ -33,7 +33,7 @@ Ce sera compilé en : 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. +Puisque que les fichiers `.png` ne sont pas des fichiers JavaScript, Nuxt.js configure webpack pour 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 ressources, comment les nommer et vous permet d'utiliser des hashs de version pour un meilleur cache. @@ -64,7 +64,7 @@ Actuellement, la configuration des loaders par défaut de Nuxt.js est la suivant 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 hashs de version pour une meilleure mise en cache. -Lors du lancement de notre application avec `nuxt`, notre modèle dans `pages/index.vue` : +Lors du lancement de notre application avec `nuxt`, notre template dans `pages/index.vue` : ```html