Nuxt4 静态资源

Nuxt 里「图片、字体、图标、全局 CSS」这些不随页面变化的文件叫静态资源。它们放错目录，轻则路径写错，重则打包时找不到文件。本篇讲清两个目录的区别和正确用法。

public 与 assets 的区别

Nuxt 约定了两个目录，职责完全不同。

public/ 里的文件会被原样拷贝到构建产物根目录，访问时用根路径 /文件名。适合放 favicon、robots.txt、已经处理好的大图等「需要按固定 URL 直接访问」的文件。
assets/ 里的文件会经过打包工具处理（压缩、哈希命名、按需收集），适合放被组件 import 的图片、字体、Sass 源码等资源。

一句话总结：别人要通过固定 URL 直接访问的放 public/，被代码引用、需要打包优化的放 assets/。

把文件放进 public/，直接写根路径即可，不需要写相对路径。

<!-- 站点图标，浏览器自动请求 /favicon.ico -->
<link rel="icon" href="/favicon.ico">

<!-- 一张已有的图片 -->
<img src="/logo.png" alt="logo">

robots.txt、站点地图这类文件也要放 public/，部署后访问 /robots.txt 就能拿到。在网站配置篇里引用 favicon，用的也是这个 /favicon.ico 根路径。

在组件里用 import 或 ~ / @ 别名引用 assets/ 下的文件。

<script setup>
// ~ 指向项目根目录，Nuxt 会自动处理这张图片
import logo from '~/assets/logo.png'
</script>

<template>
  <img :src="logo" alt="logo">
</template>

~ 和 @ 都指向项目根目录，~/assets/... 和 @/assets/... 等价。这样引用的图片会被打包工具处理，文件名变成带哈希的版本，利于浏览器缓存。

CSS 中也可以用 ~ 别名引用 assets/ 下的文件。

.hero {
  background-image: url('~/assets/bg.png');
}

全局 CSS 写在 nuxt.config.ts 的 css 配置里（见网站配置篇），局部样式直接写在组件的 <style> 中即可。

Nuxt 官方提供 @nuxt/image 模块，能自动做尺寸调整、格式转换（WebP）、懒加载。需要图片优化时再引入，新手阶段先用上面的基础方式就够。

记住核心区别即可：固定 URL 能直接访问的放 public/，被代码 import 要打包的放 assets/。