首先先说下为什么写这个文章：

本人是一名前端开发，目前主要使用的是vue3框架，最近几天学习了下Nuxt3，因为之前前端项目使用的图标库是阿里图标库，所以就想在Nuxt3的前端中引入一下阿里图标，结果一直有问题，搞了半天，又是搜资料，又是问AI工具，不过最终在AI工具的帮助下，解决了Nuxt3引入图标库后：报错问题以及symbol图标显示不出来的问题。

先看下项目目录：

我把iconfont相关文件都存到了assets文件夹下，所以此教程是引入的本地 iconfont.js 文件；

目前有两种导入方式，都是本人测试过的

方法1：使用 document.createElement(‘script’) 动态导入第三方js

代码如下：

// 动态加载内部js：阿里图标js
const loadIconfont = () => {
  const script = document.createElement('script')
  script.src = new URL('/assets/iconfonts/iconfont1.js', import.meta.url).href // 替换为你的第三方文件路径
  script.onload = () => {
    console.log('Third-party script loaded')
  }
  script.onerror = () => {
    console.error('Third-party script failed to load')
  }
  document.body.appendChild(script)
}

onMounted(() => {
  loadIconfont()
})

这个方法的好处就是不需要修改原始文件（iconfont.js）

方法2：使用nuxt.config.ts的plugins导入

这个方法需要修改一下iconfont源代码，这是因为：在 Nuxt 3 中，如果你使用 plugins 配置项或 useHead 来引入 JavaScript 文件，这些文件需要有一个默认导出，否则 Nuxt 会忽略它们。具体来说，这些文件需要导出一个由 defineNuxtPlugin 定义的插件。

只需要把源代码全部放到

export default defineNuxtPlugin(() => {}) 

这里即可；

nuxt.config.ts配置如下：

  plugins: [
    { src: '~/assets/iconfonts/iconfont.js', ssr: false, mode: 'client' },
  ],

注意⚠️：mode一定要设置成mode: ‘client’，不然会在服务端导入这个iconfont.js，但是服务端没有window这个对象，所以会一直报错的问题，如下图所示：