4.12-《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》静态资源（assets和public）

《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》全文电子档将分章节陆续在“nuxt”微信订阅号原创发布，敬请关注。如果您等不及，急切提前阅读和实操，可以在订阅号中有偿获取完整电子教程和后续持续更新版本。

本教程配套示例源码下载和在线预览网址：https://www.dvtop.cn

Nuxt3使用两个目录来处理样式、字体或图像等资源。

建议：需要对客户端单独提供URL访问的资源放在public，会增加请求次数；程序中内部使用、打包在一起且不对外提供URL访问的资源放在assets，页面一次请求即可使用。

4.12.1 public目录

目录~/public内容按原样在服务端根目录下提供，如有图片~/public/logo.ipg对外访问网址为http://localhost:3000/logo.ipg。包含保留其名称（例如robots.txt）或可能不会更改（例如favicon.ico）的公共文件，也可以将assets内容放在public提供直接访问服务。

~/public/resource/css/resource.css
.resource-text-right{   font-size: 30px;   text-align: right; }
图片，请自行准备或从源码中复制	~/public/resource/img/public.png
~/pages/resources/public.vue
<template>   <div>     <BaseFooLink></BaseFooLink>     <h6>public目录（静态资源）的示例。</h6>     <div class="resource-text-right">样式效果，文本右对齐，大号字体！</div>     <div><img :src="baseURL+'resource/img/public.png'"></div>   </div> </template> <script setup>   const config = useRuntimeConfig();   const baseURL = config.app.baseURL; </script> <style scoped>   @import "/resource/css/resource.css"; </style>

以上通过网址http://localhost:3000/resources/public可正常浏览网页。

4.12.2 assets目录

目录~/assets内容通过构建工具（Vite或Webpack）直接打包融合到应用程序中使用，不再服务端提供访问服务。

目录通常包含以下类型的文件：

1、样式表（CSS、SASS等）。

2、字体。

3、图像。

此部分将在“nuxt”微信订阅号原创发布，csdn同步更新，敬请关注。如果您等不及，急切提前阅读和实操，可以在订阅号中有偿获取完整电子教程和后续持续更新版本。