Nuxt.js 資源文件

默認(rèn)情況下 Nuxt 使用 vue-loader、file-loader 以及 url-loader 這幾個(gè) Webpack 加載器來處理文件的加載和引用。對(duì)于不需要通過 Webpack 處理的靜態(tài)資源文件，可以放置在 static 目錄中。

Webpack 構(gòu)建

默認(rèn)情況下, vue-loader自動(dòng)使用 css-loader 和Vue模板編譯器來編譯處理vue文件中的樣式和模板。在此編譯過程中，所有的資源URL例如 <img src="...">、 background: url(...) 和 CSS中的 @import 均會(huì)被解析成模塊通過 require 引用。

舉個(gè)例子, 假設(shè)我們有以下文件目錄結(jié)構(gòu)：

-| assets/
----| image.png
-| pages/
----| index.vue

如果我們?cè)贑SS代碼中使用 url('~assets/image.png'), 那么編譯后它將被轉(zhuǎn)換成 require('~/assets/image.png')。

請(qǐng)注意: 從Nuxt 2.0開始，~/alias將無法在CSS文件中正確解析。你必須在url CSS引用中使用~assets（沒有斜杠）或@別名，即background:url("~assets/banner.svg")

又或者如果我們?cè)?nbsp;pages/index.vue 中使用以下代碼引用圖片資源：

<template>
  <img src="~/assets/image.png">
</template>

那么編譯后會(huì)被轉(zhuǎn)換成：

createElement('img', { attrs: { src: require('~/assets/image.png') } })

.png 并非 JavaScript 文件, 因此 Nuxt.js 通過配置Webpack使用file-loader 和 url-loader 這兩個(gè)加載器來處理此類引用。

這樣做的好處有：

• file-loader 能讓你指定從什么地方拷貝資源文件以及發(fā)布后放到哪個(gè)目錄去，并能讓你使用版本哈希碼來重命名發(fā)布后的文件來實(shí)現(xiàn)增量更新和更好的緩存策略。
• url-loader 能根據(jù)你指定的文件大小閾值，來判斷一個(gè)文件是轉(zhuǎn)換成內(nèi)聯(lián)的base-64碼（如果該文件尺寸小于該閾值）還是使用file-loader來降級(jí)處理。小文件base-64化能有效減少HTTP請(qǐng)求數(shù)。

實(shí)際上, Nuxt.js 默認(rèn)的加載器配置如下：

[
  {
    test: /\.(png|jpe?g|gif|svg)$/,
    loader: 'url-loader',
    query: {
      limit: 1000, // 1KB
      name: 'img/[name].[hash:7].[ext]'
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    query: {
      limit: 1000, // 1 KB
      name: 'fonts/[name].[hash:7].[ext]'
    }
  }
]

也即文件（圖片或字體）的尺寸小于1K的時(shí)候，它將會(huì)被轉(zhuǎn)換成 Base-64 data URL 來內(nèi)聯(lián)引用；否則它將被拷貝至指定的子目錄（在 .nuxt 目錄下），并被重命名（加上7位的哈希碼作為版本標(biāo)識(shí)）以實(shí)現(xiàn)更好的緩存策略。

當(dāng)用 nuxt 命令運(yùn)行我們的應(yīng)用時(shí)，pages/index.vue 中的模板代碼：

<template>
  <img src="~/assets/image.png">
</template>

將被編譯生成：

<img src="/_nuxt/img/image.0c61159.png">

如果你想更新這些加載器的配置或者禁用他們，請(qǐng)參考build.extend。

靜態(tài)文件

如果你的靜態(tài)資源文件需要 Webpack 做構(gòu)建編譯處理，可以放到 assets 目錄，否則可以放到 static 目錄中去。

Nuxt 服務(wù)器啟動(dòng)的時(shí)候，該目錄下的文件會(huì)映射至應(yīng)用的根路徑 / 下，像 robots.txt 或 sitemap.xml 這種類型的文件就很適合放到 static 目錄中。

你可以在代碼中使用根路徑 / 結(jié)合資源相對(duì)路徑來引用靜態(tài)資源：

<!-- 引用 static 目錄下的圖片 -->
<img src="/my-image.png"/>

<!-- 引用 assets 目錄下經(jīng)過 webpack 構(gòu)建處理后的圖片 -->
<img src="~/assets/my-image-2.png"/>