Nuxt 3添加外部JavaScript文件未加载问题求助

你当前配置里的script是顶层属性，但这不是Nuxt 3的合法配置项，框架不会识别并加载这个脚本。下面是两种正确的配置方式：

方法一：在nuxt.config.ts全局配置 #

将脚本配置放到app.head.scripts下，这是Nuxt 3全局配置头部资源的正确位置：

export default defineNuxtConfig({
    css: [
        'bootstrap/dist/css/bootstrap.min.css'
    ],
    app: {
        head: {
            scripts: [
                {
                    src: '/script.js', // 本地脚本需放在项目public目录下
                    body: true // 可选：将脚本放在body末尾，避免阻塞页面渲染
                }
            ]
        }
    },
    vite: {
        define: {
            'process.env.DEBUG': false,
        },
    }
})

注意事项： #

• 如果你加载的是本地脚本，必须把script.js放在项目根目录的public文件夹下，这样Nuxt会将其视为静态资源，通过/script.js路径即可访问。
• 如果是外部CDN脚本，直接填写完整URL即可，比如src: 'https://cdn.example.com/script.js'。

方法二：在组件/页面中按需加载 #

如果只需要在特定页面或组件加载脚本，可以使用Nuxt的useHead组合式API：

<script setup>
useHead({
  scripts: [
    {
      src: '/script.js',
      body: true
    }
  ]
})
</script>

排查要点 #

• 打开浏览器开发者工具的网络面板，检查脚本是否有404错误，确认路径是否正确。
• 如果脚本依赖DOM元素，确保脚本执行时机在DOM渲染完成后（使用body: true或添加async/defer属性）。

内容的提问来源于stack exchange，提问作者diyifi3030