Nuxt 3中引入本地JS文件失败，如何解决？

错误原因 #

你直接使用assets/js/app.js作为脚本路径，浏览器会将其解析为当前域名下的相对路径（http://localhost:3001/assets/js/app.js），但Nuxt 3中assets目录下的文件会被Webpack编译处理，不会直接暴露在服务器的/assets路径下，因此出现404错误。

两种解决方案 #

方案1：让JS文件参与编译（适用于自定义/需要打包的JS） #

在路径前添加~/前缀，Nuxt会自动识别这是项目根目录下的资源，编译时生成正确的访问路径：

• 修改nuxt.config.js配置：

app: {
  head: {
    script: [
      {'src': '~/assets/js/plugins.init.js', body: true},
      {'src': '~/assets/js/app.js', body: true}
    ],
  },
}

• 或者修改页面中的useHead代码：

useHead({
script: [
{
    src: '~/assets/js/app.js',
    body: true,
    defer: true
},
{
    src: '~/assets/js/plugins.init.js',
    body: true,
    defer: true
},
],
})

方案2：作为静态资源引入（适用于无需编译的第三方JS） #

如果你的JS文件不需要编译处理，将其移动到项目根目录的public文件夹下，目录结构调整为public/assets/js/app.js，然后用根路径开头的地址引入：

useHead({
script: [
{
    src: '/assets/js/app.js',
    body: true,
    defer: true
},
{
    src: '/assets/js/plugins.init.js',
    body: true,
    defer: true
},
],
})

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