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

Webpack 構建

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

舉個例子, 假設我們有以下文件目錄結構：

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

如果我們在CSS代碼中使用 url('~assets/image.png'), 那么編譯后它將被轉換成 require('~/assets/image.png')。

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

又或者如果我們在 pages/index.vue 中使用以下代碼引用圖片資源：

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

那么編譯后會被轉換成：

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

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

這樣做的好處有：

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

實際上, Nuxt.js 默認的加載器配置如下：

[
  {
    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的時候，它將會被轉換成 Base-64 data URL 來內聯(lián)引用；否則它將被拷貝至指定的子目錄（在 .nuxt 目錄下），并被重命名（加上7位的哈希碼作為版本標識）以實現(xiàn)更好的緩存策略。

當用 nuxt 命令運行我們的應用時，pages/index.vue 中的模板代碼：

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

將被編譯生成：

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

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

靜態(tài)文件

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

Nuxt 服務器啟動的時候，該目錄下的文件會映射至應用的根路徑 / 下，像 robots.txt 或 sitemap.xml 這種類型的文件就很適合放到 static 目錄中。

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

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

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