分享：nuxtWebpack 构建

最新推荐文章于 2025-03-06 16:13:38 发布

万花丨凋

最新推荐文章于 2025-03-06 16:13:38 发布

阅读量1k

点赞数

分类专栏： nuxt vue 文章标签： vue html5

本文链接：https://blog.youkuaiyun.com/awseda/article/details/106729125

版权

nuxt 同时被 2 个专栏收录

45 篇文章

订阅专栏

vue

39 篇文章

订阅专栏

本文详细介绍了Nuxt.js中Webpack如何处理CSS和Vue文件中的资源引用，包括file-loader和url-loader的使用，以及如何通过配置实现资源的增量更新和缓存策略。通过举例说明了默认配置及如何自定义配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Webpack 构建

默认情况下, vue-loader自动使用 css-loader 和Vue模板编译器来编译处理vue文件中的样式和模板。在此编译过程中，所有的资源URL例如、 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 能让你指定从什么地方拷贝资源文件以及发布后放到哪个目录去，并能让你使用版本哈希码来重命名发布后的文件来实现增量更新和更好的缓存策略。
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。
————————————————————————————————————————————
链接：
1.https://vue-loader.vuejs.org/en/
2.https://github.com/webpack-contrib/file-loader
3.https://github.com/webpack-contrib/url-loader
4.https://zh.nuxtjs.org/api/configuration-build#extend