nuxt的资源文件——nuxt2

资源文件就是指：js文件，css文件，图片，文本文件等。常见的资源文件有：

• HTML 文件：用于定义网页的结构和内容。
• CSS 文件：用于定义网页的样式和布局。
• JavaScript 文件：用于定义网页的行为和交互。
• 图像文件（如 JPG、PNG、SVG等）：用于增强网页可视化和布局。
• 字体文件：可以提供更丰富的文字样式和效果。
• 音频或视频文件：可以用来播放音频或视频内容。
• JSON、XML等数据文件：可以用于存放数据，或与服务器交换数据。

nuxt的资源文件一般放置在static和assets目录中，两者的区别是，static目录中的资源不会被 Webpack 处理，assets目录中的资源会被Webpack处理。

nuxt处理资源文件的方法

默认情况下 Nuxt 使用 vue-loader、file-loader 以及 url-loader 这几个 Webpack 加载器来处理文件的加载和引用。
对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中，对于需要使用Webpack加载的静态资源放在assets目录中。

Webpack 构建静态资源的方法

vue-loader

默认情况下, vue-loader自动使用 css-loader 和 Vue 模板编译器来编译处理 vue 文件中的样式和模板。在此编译过程中，所有的资源 URL 例如 <img src="...">、 background: url(...) 和 CSS 中的 @import 均会被解析成模块通过 require 引用。

举个例子, 假设我们有以下文件目录结构：

-| assets/
----| image.png

如果我们在 CSS 代码中使用 url('~assets/image.png'), 那么编译后它将被转换成 require('~/assets/image.png')。

又或者如果我们在 pages/index.vue 中使用以下代码引用图片资源：

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

那么编译后会被转换成：

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

file-loader 和 url-loader

图片资源并非 JavaScript 文件, Nuxt.js 通过配置 Webpack 使用file-loader 和 url-loader 这两个加载器来处理此类引用，因为使用file-loader 和 url-loader 有如下优点：

• file-loader 能让你指定从什么地方拷贝资源文件以及发布后放到哪个目录去，并能让你使用版本哈希码来重命名发布后的文件来实现增量更新和更好的缓存策略。
• url-loader 能根据你指定的文件大小阈值，来判断一个文件是转换成内联的 base-64 码（如果该文件尺寸小于该阈值）还是使用file-loader来降级处理。小文件 base-64 化能有效减少 HTTP 请求数。

实际上, 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 来内联引用；否则它将被拷贝至指定的子目录（在 .nuxt 目录下），并被重命名（加上 7 位的哈希码作为版本标识）以实现更好的缓存策略。

静态文件static

• 如果你的静态资源文件需要 Webpack 做构建编译处理，可以放到 assets 目录，否则可以放到 static 目录中去。

• Nuxt 服务器启动的时候，static目录下的文件会映射至应用的根路径 / 下，像 robots.txt 或 sitemap.xml 这种类型的文件就很适合放到 static 目录中。

• 引用assets目录和static目录下资源的区别
  你可以在代码中使用根路径 / 结合资源相对路径来引用静态资源：

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

<!-- 引用 assets 目录下经过 webpack 构建处理后的图片 -->
<img src="~/assets/my-image-2.png" />