Nuxt.js 如何从assets目录正确导入本地JS文件？

错误原因 #

你当前在nuxt.config.js的head.script配置中使用了路径别名、相对路径等写法，但head字段下的资源路径默认直接插入HTML源码，不会经过Webpack解析，无法识别~、@、./这类路径标识，因此会出现脚本找不到的报错。

两种正确导入方案 #

方案1：放入静态资源目录后配置head.script #

• 将需要引入的JS文件统一放到项目根目录的static（Nuxt2）或public（Nuxt3）文件夹下，比如你可以把dashboard.js放到static/js/dashboard.js
• 配置head.script时直接写相对于静态资源根目录的绝对路径即可，示例：

head: {
  title: 'admin',
  htmlAttrs: {
    lang: 'en'
  },
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { hid: 'description', name: 'description', content: '' },
    { name: 'format-detection', content: 'telephone=no' }
  ],
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  ],
  script: [
    {
      type: 'text/javascript',
      src: '/js/dashboard.js'
    },
    {
      type: 'text/javascript',
      src: '/plugins/charts-c3/plugin.js'
    },
    {
      type: 'text/javascript',
      src: '/plugins/maps-google/plugin.js'
    },
    {
      type: 'text/javascript',
      src: '/plugins/input-mask/plugin.js'
    }
  ],
}

方案2：通过plugins配置引入（推荐） #

如果希望JS文件保留在assets目录下，不需要配置head.script，直接在nuxt.config.js的plugins字段引入即可：

// nuxt.config.js
plugins: [
  '~/assets/js/dashboard.js',
  '~/assets/plugins/charts-c3/plugin.js',
  '@/assets/plugins/maps-google/plugin.js',
  '~/assets/plugins/input-mask/plugin.js'
]

• 该方式Nuxt会自动解析Webpack路径别名，还支持控制脚本执行环境：如果脚本只需要在客户端运行，可写成{ src: '~/assets/js/dashboard.js', mode: 'client' }（Nuxt3）或{ src: '~/assets/js/dashboard.js', ssr: false }（Nuxt2）

注意事项 #

head.script的src仅支持直接可访问的公开路径，不要在该字段中使用~、@、相对路径这类仅Webpack能识别的路径写法

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