1. public/ 目录
    2. assets/目录
    3. 全局样式导入

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

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参数。