您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Nuxt.js 资源文件

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

认情况下, 使用 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 能根据你指定的大小阈值,来判断是转换成内联的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位的哈希码作为版本标识)以实现更好的缓存策略。

当用 nuxt 命令运行我们的应用时,pages/index.vue 中的模板:

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

将被编译:

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

如果你想更新这些加载器的配置或者禁用他们,请参考build.extend。

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

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

你可以在中使用根路径 / 结合资源相对路径来引用静态资源:

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

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

联系我
置顶