【Nuxt】资源导入

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>