assets
Nuxt为你的资产提供了两种处理方式。
Nuxt使用两个目录来处理样式表、字体或图片等资产：
public/目录的内容会直接以服务器根路径的形式提供。assets/目录按惯例包含你希望构建工具（Vite或webpack）处理的所有资产。
公共目录
public/目录用作静态资产的公共服务器，这些资产可以在你的应用定义的URL下公开访问。
你可以通过应用的代码或浏览器使用根URL/来获取public/目录中的文件。
示例
例如，引用位于public/img/目录中的图像文件，可通过静态URL/img/nuxt.png访问：
// app.vue
<template>
<img src="/img/nuxt.png" alt="探索 Nuxt" />
</template>
资产目录
Nuxt使用Vite（默认）或webpack来构建和打包你的应用。这些构建工具的主要功能是处理JavaScript文件，但可以通过插件（用于Vite）或加载器（用于webpack）扩展，以处理其他类型的资产，例如样式表、字体或SVG。这一过程主要为了性能或缓存目的转换原始文件（例如样式表压缩或浏览器缓存失败）。
按照惯例，Nuxt使用assets/目录来存储这些文件，但该目录没有自动扫描功能，你可以为它使用任何其他名称。
在应用代码中，可以通过~/assets/路径引用位于assets/目录中的文件。
示例
例如，引用一个图像文件，如果构建工具配置为处理此文件扩展名，该文件将被处理：
// app.vue
<template>
<img src="~/assets/img/nuxt.png" alt="探索 Nuxt" />
</template>
Nuxt不会以静态URL（如/assets/my-file.png）提供assets/目录中的文件。如果你需要静态URL，请使用public/目录。
区别 —— 纠结用哪个可以看这张表
| 特性 | public/目录 | assets/目录 |
|---|---|---|
| 目的 | 静态资源服务器 | 构建时处理的资源 |
URL访问 | 直接通过根路径/访问 | 需通过~/assets/路径引用 |
| 构建处理 | 不经过构建工具处理 | 经过Vite/webpack处理（压缩、优化等） |
| 更新方式 | 直接替换文件 | 构建后生成新文件（带哈希） |
| 适用场景 | 不常更改的资源（如favicon、robots.txt） | 需要构建优化的资源（图片、样式、字体） |
public/
// vue
<!-- 适用于： -->
<!-- 不常更新的静态文件 -->
<img src="/favicon.ico" alt="网站图标" />
<a href="/brochure.pdf">下载手册</a>
assets/
// vue
<!-- 适用于： -->
<!-- 需要优化处理的图片 -->
<img src="~/assets/images/hero.jpg" alt="英雄" />
<!-- 2. 样式文件（SCSS/SASS/LESS） -->
<style>
@import '~/assets/styles/main.scss';
</style>
<!-- 3. 字体文件 -->
<style>
@font-face {
font-family: 'CustomFont';
src: url('~/assets/fonts/custom.woff2') format('woff2');
}
</style>
实战目录结构
my-nuxt-app/
├── public/
│ ├── favicon.ico # 直接通过 /favicon.ico 访问
│ ├── robots.txt # 直接通过 /robots.txt 访问
│ └── downloads/
│ └── brochure.pdf # 直接通过 /downloads/brochure.pdf 访问
├── assets/
│ ├── images/
│ │ ├── logo.png # 构建优化后的图片
│ │ └── background.jpg
│ ├── styles/
│ │ ├── main.scss # 编译处理的SCSS文件
│ │ └── variables.scss
│ └── fonts/
│ └── custom.woff2 # 字体文件
└── components/
└── MyComponent.vue
<!-- 优先使用assets/以获得构建优化 -->
<img src="~/assets/images/product.jpg" alt="产品" />
<!-- 大尺寸或不需要优化的图片可以放在public -->
<img src="/documentation/large.png" alt="架构图" >
动态
<script setup>
// 使用 import 获取 assets 资源（会经过构建处理）
import logo from '~/assets/images/logo.png'
// 使用相对路径引用 public 资源
const publicImage = '/images/banner.png'
</script>
css中用
/* 在 CSS 中引用 assets 资源 */
.hero {
background-image: url('~/assets/images/bg.jpg');
}
/* 引用 public 资源 */
.external {
background-image: url('/external-bg.png');
}
提醒
-
缓存策略：
assets/中的文件通常会添加哈希值，便于缓存管理public/中的文件使用原始名称，需手动管理缓存
-
部署考虑：
public/目录内容会原样复制到构建输出assets/目录内容会被处理并打包
-
性能优化：
- 小图标建议使用
assets/以便打包优化 - 大文件（如视频）建议使用
public/避免构建过程变慢
- 小图标建议使用
