【Nuxt3系列四】处理静态资源

官方教程

Nuxt为你提供了两种方式去处理静态资源

• public/目录在构建后，将原封不动的复制到网站中同等的位置
• assets/目录提供适合的静态资源给你所选择的构建工具vite或者是webpack

public

例如你有个文件 public/images/logo.png

构建后部署到服务器上，网站的域名是test.com。则你可以通过test.com/public/images/logo.png去访问这个图片

<template>
  <img src="/images/logo.png" alt="Discover Nuxt 3" />
</template>

assets

Nuxt默认采用Vite构建。把静态资源放在这里，vite会对他们进行一定的转换。例如会对css进行压缩，提高性能。

按照约定，我们都把字体、css文件、SVG放在assets中。

在您的应用代码中，可以使用 ~/assets/ 路径来引用位于 assets/ 目录中的文件。

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

全局样式表

可以通过vite的配置项，把在assets中的全局样式，引入到程序中

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