Nuxt使用两个目录来处理样式表、字体或图片等资源。
public/
目录
public/
目录用作静态资源公共服务,可在您的应用程序中定义的 URL 上公开访问。
您可以通过应用程序代码或通过根URL/
从浏览器获取 public/
目录中的文件。
例子
举个例子,如果要引用public/img/
目录中的图像文件,静态资源URL应该是这样的:/img/nuxt.png
<!-- app.vue -->
<template>
<img src="/img/nuxt.png" alt="Discover Nuxt 3" />
</template>
assets/
目录
Nuxt使用Vite或webpack来构建和打包您的应用程序。这些构建工具的主要功能是处理JavaScript文件,但它们可以通过plugins(对于Vite)或 loaders(对于webpack)进行扩展,以处理其他类型的资源,如样式表、字体或SVG。这一步骤主要是为了性能或缓存目的对原始文件进行转换(例如样式表的缩小或浏览器缓存失效)。
按照惯例,Nuxt使用assets/
目录来存储这些文件,但该目录没有自动扫描功能,您可以使用任何其他名称。
在您的应用程序代码中,您可以通过使用~/assets/
路径引用位于assets/
目录中的文件
例子
举个例子,如果配置了构建工具来处理该类型文件,可以这样引用将被处理的图像文件:
<!-- app.vue -->
<template>
<img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" />
</template>
Nuxt不会在静态URL(例如
/assets/my-file.png
)下提供assets/
目录中的文件。如果您需要一个静态URL,请使用public/
目录。
如果需要在Nuxt组件的样式中全局插入语句,您可以在nuxt.config
文件中使用“Vite
配置项”。
例子
在这个例子中,有一个包含颜色变量的Sass部分文件,可以供您的Nuxt页面和组件使用。(下面的代码二选一)
// assets/_colors.scss
$primary: #49240F;
$secondary: #E4A79D;
// assets/_colors.sass
$primary: #49240F
$secondary: #E4A79D
nuxt.config
中,您可以像这样配置:(下面的代码二选一)// 使用的是scss
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/assets/_colors.scss" as *;'
}
}
}
}
})// 使用的是sass
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
sass: {
additionalData: '@use "@/assets/_colors.sass" as *\n'
}
}
}
}
})