Nuxt使用两个约定的目录来管理静态资源比如样式，字体和图片。

• public/目录中的内容，会被视为网站根目录，开发与构建阶段不会受到预处理（比如hash化、压缩等）
• assets/目录中的文件，会受到构建工具的处理

public/ 目录

public/可以理解为网站根目录（区别于项目代码根目录）。放置在这个文件夹中的文件，可以直接通过/路径访问到。

比如网站域名为http://example.com，则/public/logo.png可以通过http://example.com/logo.png访问到。

在做一个网站所有者认证的时候，比如说百度统计认证，微信小程序引用的网址认证时，可以把认证文件放在这个目录中，然后部署到服务器上。

assets/目录

Nuxt使用Vite或者webpack来构建、打包应用。这类工具的主要作用是处理Javascript代码。但是，通过Vite的plugins或者webpack的loaders，它们也可以用来处理其他类型的资源，比如样式文件、字体文件、SVG等。这种处理的目的，一般是基于性能和缓存的考虑。

按照Nuxt的约定，assets/目录中的静态文件，会被自动地扫描并优化处理。

在应用的代码中，你可以使用~/assets/来引用assets/目录下的文件。

示例：

<template>
  <img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" />
</template>

全局样式导入

为了全局地导入样式声明，以便在组件中使用。你可以作改nuxt.config中的vite配置。

比如下面的scss声明文件：assets/_colors.scss

$primary: #49240F;
$secondary: #E4A79D;

想在组件中使用上述变量，则需要这么修改nuxt.config

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/_colors.scss" as *;'
        }
      }
    }
  }
})

在组件中使用：

<template>
  <div class="text">
    primary text
  </div>
</template>
<style lang="scss">
.text {
  color: $primary;s
}
</style>

注意，style要带上lang参数。