public 通常用于存放静态资源。
assets 通常用于存放样式表、字体或者 svg 的资源。
图片资源
alias 推荐使用
~。
<img src="/avatar1.png" alt="avatar1"/>
<img src="@/assets/images/unnamed.jpg" alt="unnamed"/>
<template><div><div class="page-container">这是 app 页面</div><div class="global-container">这也是 app 页面</div><!-- / 后直接访问就是 public 目录下资源--><img src="/avatar1.png" alt="avatar1"/><!-- 支持 base64 url 等--><img :src="unnamed" alt="avatar1"/><img src="@/assets/images/unnamed.jpg" alt="unnamed"/><!-- NuxtPage 是对 router-view 的封装--><NuxtPage/></div>
</template>
<script setup>
import unnamed from '@/assets/images/unnamed.jpg'
</script>
<style scoped></style>
字体图标
在阿里矢量库中下载字体图标：iconfont，然后添加进入购物车，下载代码。
代码里面会有若干文件，我们需要保留 css 和 ttf 即可。然后在 css 中更改 ttf 的路径为我们项目中实际的路径：
然后在 nuxt.config.ts 中引入：
就可以在组件中使用了：
<i class="iconfont icon-mtiIcon-caozuo-duihao"></i>