如何在Nuxt 3中引入外部JavaScript与jQuery文件？

存放位置 #

• 官方推荐路径：将外部JS/jQuery脚本放在项目根目录的 public 文件夹下，可创建 public/js 子目录统一管理。public 目录下的资源会被原样复制到构建产物中，能直接通过相对路径访问。

最优解决方案 #

根据脚本的使用场景，选择以下对应方案：

1. 静态标签引入（适合小型独立脚本） #

直接在组件模板末尾添加<script>标签引入，避免阻塞页面渲染：

<template>
  <!-- 页面内容 -->
</template>

<script setup>
// 组件逻辑
</script>

<script src="/js/jquery.min.js" defer></script>
<script src="/js/custom-script.js" defer></script>

2. 全局配置注入（适合全应用依赖的脚本） #

在nuxt.config.ts中配置全局头部脚本，实现全应用自动引入：

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        // 本地脚本
        { src: '/js/jquery.min.js', defer: true },
        // 优先推荐CDN引入，减少本地资源体积
        { src: 'https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js', defer: true }
      ]
    }
  }
})

defer属性确保脚本在DOM加载完成后执行，避免DOM操作报错

3. 插件封装（规范的全局使用方式） #

若需在Vue组件中全局访问jQuery，封装为Nuxt客户端插件：

1. 在plugins目录创建jquery.client.ts：

import jquery from 'jquery'

export default defineNuxtPlugin(() => {
  if (process.client) {
    window.$ = window.jQuery = jquery
  }
})

Nuxt会自动加载plugins目录下的文件，无需额外配置，这种方式更贴合Nuxt的生命周期管理。

4. 动态按需引入（仅特定页面使用） #

仅在需要的页面中，通过Vue生命周期钩子动态创建脚本标签：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  const script = document.createElement('script')
  script.src = '/js/custom-script.js'
  script.defer = true
  document.body.appendChild(script)
})
</script>

内容的提问来源于stack exchange，提问作者Mostafa-Asgari