如何正确将所需JS文件引入head标签？Nuxt脚本加载异常问题求解

核心问题原因 #

你遇到的路径错误核心是静态资源存放路径不匹配、路径引用规则错误两个问题：

1. 自定义静态 JS 文件如果没有经过打包工具处理，不会出现在 __nuxt 内部路径下，直接用该前缀访问必然404
2. 引入到 head 标签的脚本路径配置不符合 Nuxt 的约定规则，导致加载报错

具体解决步骤 #

第一步：确认 JS 文件存放目录 #

• 如果你不需要打包工具处理该 JS 文件，直接保留原文件内容：
  • Nuxt 2 版本：将文件放到项目根目录的 static 文件夹下
  • Nuxt 3 版本：将文件放到项目根目录的 public 文件夹下
• 如果你需要 webpack/vite 压缩、编译该 JS 文件：将文件放到项目根目录的 assets/js 文件夹下

第二步：配置 head 引入脚本 #

Nuxt 2 配置（修改 nuxt.config.js）

export default {
  head: {
    script: [
      // 引入static目录下的静态JS，路径直接写/开头的绝对路径
      { src: '/your-custom.js', body: false }, // body: false 表示放在head中，true放在body末尾
      // 引入assets目录下需要打包的JS
      { src: '~/assets/js/your-custom.js', body: false }
    ]
  }
}

Nuxt 3 配置（修改 nuxt.config.ts）

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        // 引入public目录下的静态JS
        { src: '/your-custom.js', tagPosition: 'head' },
        // 引入assets目录下需要打包的JS
        { src: '~/assets/js/your-custom.js', tagPosition: 'head' }
      ]
    }
  }
})

第三步：局域网部署额外检查 #

• 确认 nuxt.config 中的基础路径配置和实际部署路径匹配：
  • Nuxt 2 检查 router.base 配置
  • Nuxt 3 检查 app.baseURL 配置
• 如果你引入的是外部 CDN 的 JS 文件，确认局域网环境有对应的外网访问权限，没有权限请将 JS 文件下载到本地 public/static 目录后再引入
• 部署到 Linux 环境时注意路径大小写匹配，避免大小写敏感导致的404问题

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