Nuxt.js 资源文件分析

发布时间：2023-04-14 13:12:17 所属栏目：教程来源：

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

Webpack 构建

默认情

默认情况下 Nuxt 使用 vue-loader、file-loader 以及 url-loader 这几个 Webpack 加载器来处理文件的加载和引用。对于不需要通过 Webpack 处理的静态资源文件，可以放置在 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")

<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 能让你指定从什么地方拷贝资源文件以及发布后放到哪个目录去，并能让你使用版本哈希码来重命名发布后的文件来实现增量更新和更好的缓存策略。

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]'
}
}
]

当用 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 目录中。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!