文章目录一、public 目录二、assets 目录三、图片优化1. 使用 nuxt/image 模块2. 懒加载3. 占位图四、字体管理1. 本地字体2. 使用 nuxtjs/google-fonts五、图标管理1. Icon 组件2. 本地 SVG 图标3. 自定义 Icon 组件六、视频资源七、资源预加载八、资源 CDN总结个人网站网站除了代码还有图片、字体、图标等静态资源。管理不好会导致图片加载慢、字体闪烁、打包体积大……今天学习 Nuxt 的静态资源管理最佳实践。一、public 目录public目录下的文件会直接暴露到网站根目录public/ ├── favicon.ico ├── images/ │ └── logo.png └── robots.txt访问方式/images/logo.pngtemplate img src/images/logo.png altLogo / /template适合放faviconrobots.txt不需要处理的图片第三方库的静态文件二、assets 目录assets目录的资源会被构建工具处理assets/ ├── css/ │ └── main.css ├── images/ │ └── hero.jpg └── fonts/ └── custom.woff2访问方式需要用~/assets/前缀script setup langts // 在 JS 中引入 import heroImage from ~/assets/images/hero.jpg /script template !-- 在模板中 -- img src~/assets/images/hero.jpg altHero / !-- 或使用引入的变量 -- img :srcheroImage altHero / /template适合放需要 hash 的资源CSS 文件需要优化处理的图片三、图片优化图片是网站体积大户优化很关键1. 使用 nuxt/image 模块pnpmaddnuxt/image// nuxt.config.tsexportdefaultdefineNuxtConfig({modules:[nuxt/image],image:{quality:80,format:[webp,avif]}})使用template !-- 自动优化 -- NuxtImg src/images/hero.jpg width800 height400 formatwebp loadinglazy altHero / !-- 响应式图片 -- NuxtPicture src/images/hero.jpg :width800 :height400 :img-attrs{ loading: lazy } / /templateNuxtImg特点自动压缩格式转换WebP/AVIF懒加载响应式尺寸2. 懒加载template !-- 原生懒加载 -- img src/images/photo.jpg loadinglazy altPhoto / !-- NuxtImg 懒加载 -- NuxtImg src/images/photo.jpg loadinglazy / /template3. 占位图图片加载时显示占位图script setup langts const loading ref(true) /script template div classimage-container div v-ifloading classplaceholder 加载中... /div img src/images/photo.jpg loadloading false :style{ display: loading ? none : block } / /div /template style scoped .placeholder { background: #f0f0f0; animation: pulse 1.5s infinite; } keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /style四、字体管理1. 本地字体字体文件放assets/fonts/assets/ └── fonts/ ├── regular.woff2 └── bold.woff2CSS 中引入font-face{font-family:MyFont;src:url(~/assets/fonts/regular.woff2)format(woff2);font-weight:400;font-style:normal;font-display:swap;/* 避免 FOUT */}font-face{font-family:MyFont;src:url(~/assets/fonts/bold.woff2)format(woff2);font-weight:700;font-style:normal;font-display:swap;}body{font-family:MyFont,sans-serif;}font-display: swap很重要能让文字先用系统字体显示字体加载完成后再切换。2. 使用 nuxtjs/google-fontspnpmaddnuxtjs/google-fonts// nuxt.config.tsexportdefaultdefineNuxtConfig({modules:[nuxtjs/google-fonts],googleFonts:{families:{Inter:[400,500,700],Noto Sans SC:[400,700]},display:swap,preload:true}})自动下载并缓存 Google Fonts避免国内访问问题。五、图标管理1. Icon 组件Nuxt 推荐使用nuxt/iconpnpmaddnuxt/icon// nuxt.config.tsexportdefaultdefineNuxtConfig({modules:[nuxt/icon]})使用 Iconify 图标10万图标template !-- Iconify 图标 -- Icon namemdi:home / Icon namecarbon:user / Icon nameheroicons:shopping-cart / !-- 设置大小和颜色 -- Icon namemdi:home size24 color#00dc82 / /template2. 本地 SVG 图标SVG 文件放assets/icons/assets/ └── icons/ ├── home.svg └── user.svg使用template Icon namecustom:home / Icon namecustom:user / /template3. 自定义 Icon 组件!-- components/SvgIcon.vue -- script setup langts const props defineProps{ name: string size?: number }() const icons import.meta.glob(~/assets/icons/*.svg, { eager: true }) const icon computed(() { const path /assets/icons/${props.name}.svg return icons[path] }) /script template component :isicon :widthsize || 24 :heightsize || 24 / /template六、视频资源template video src/videos/demo.mp4 controls preloadmetadata poster/videos/poster.jpg 您的浏览器不支持视频播放 /video /template视频建议放public目录因为视频文件较大不需要 hash。七、资源预加载关键资源可以预加载提升首屏性能// nuxt.config.tsexportdefaultdefineNuxtConfig({app:{head:{link:[// 预加载关键字体{rel:preload,href:/fonts/regular.woff2,as:font,type:font/woff2,crossorigin:anonymous},// 预加载关键图片{rel:preload,href:/images/hero.webp,as:image}]}}})八、资源 CDN生产环境通常把静态资源放到 CDN// nuxt.config.tsexportdefaultdefineNuxtConfig({app:{baseURL:https://cdn.example.com/,cdnURL:https://cdn.example.com/}})所有资源路径都会自动加上 CDN 前缀。总结静态资源管理要点资源类型推荐位置处理方式faviconpublic直接复制CSS/JSassets构建处理图片public/assets取决于是否需要优化字体assets预加载 font-display: swap图标nuxt/icon按需加载视频public流式加载下一篇聊聊状态管理学会useState的正确用法。相关文章入门篇三Nuxt4组件自动导入写代码少敲一半字入门篇二Nuxt 4路由自动生成告别手动配置路由的日子延伸阅读nuxt4完整系列持续更新中。。欢迎来逛逛内容有帮助点赞、收藏、关注三连评论区等你