Nuxt 3.4.1中nuxt.config.ts添加外部JS文件失效，求正确配置方法

针对你在Nuxt 3.4.1中无法加载外部JavaScript文件的问题，给你几个可行的配置方案：

方案一：在nuxt.config.ts的app.head中全局配置脚本 #

这是全局加载外部脚本的标准方式，将脚本配置到app.head.script数组内，每个脚本以对象形式定义，示例如下：

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        // 按需添加async/defer属性，控制脚本加载时机
        { src: "你的外部JS文件地址", defer: true },
        // 若为public目录下的本地脚本，路径需以/开头
        { src: "/js/local-script.js", async: true }
      ]
    }
  },
  // 原有CSS配置可正常保留
  css: ["~/assets/css/your-style.css"]
})

方案二：在页面/布局中按需加载脚本 #

如果不需要全局加载脚本，可在特定页面或布局组件中使用useHead组合式API添加：

<script setup>
useHead({
  script: [
    { src: "你的外部JS文件地址", defer: true }
  ]
})
</script>

常见排查要点 #

• 确认脚本地址是否有效，可直接在浏览器地址栏访问该地址，检查文件能否正常获取
• 不要将JS文件路径放入css数组，该配置项仅用于加载样式文件
• 合理使用defer或async属性，既能避免阻塞页面渲染，也能解决部分脚本加载顺序问题

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