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