nuxt中如何引用assets中的javascript文件？

Question

请问nuxt中如何引用assets中的javascript文件？全局的或页面引用，配合CDN的设置publicPath打包编译。

我试了几个方式都不行：

head: {
    script: [
      { src: '~/assets/js/hello.js', ssr: false, body: true }
    ]
  }

head: {
    script: [
      { src: '~assets/js/hello.js', ssr: false, body: true }
    ]
  }

head: {
    script: [
      { src: require('~/assets/js/hello.js'), ssr: false, body: true }
    ]
  }

Answer 1

在 Nuxt.js 中,可以通过以下方式引用 assets 目录中的 Javascript 文件:

1. plugins/ 目录
   将 Javascript 文件放在 plugins/ 目录下,Nuxt.js 会自动引入。
   例如有 plugins/test.js 文件,则可以在页面中通过:

js
import test from '~/plugins/test'

来引用。
2. nuxt.config.js
在 nuxt.config.js 中的 plugins 数组配置引入文件。
例如:

js
module.exports = {
  plugins: [{ src: '~/assets/test.js' }]  
}

然后同样可以在页面通过 import 语句来引用。
3. 动态添加 script 标签
在页面的 asyncData 或 fetch 方法中动态添加 script 标签来引入文件。
例如:

js
async asyncData({ context }) {
  context.$socket.script.push({ src: '~/assets/test.js' })
}

这会在访问页面时动态添加一个 script 标签来引入 test.js 文件。
4. require() 语句
直接在页面使用 require() 来引入 assets 目录下的文件。
例如:

js
const test = require('~/assets/test.js')
Nuxt.js 会自动处理 es6 模块的转换,将其转为 commonjs 规范。

需要注意这种方式只支持在 pages/ 目录下,layouts、components 和 plugins 中不支持。

以上是 Nuxt.js 中引用 assets 目录下 Javascript 文件的几种方式。总结来说,推荐使用 plugins/ 目录或 nuxt.config.js 中的 plugins 选项配置,这种方式 Nuxt.js 会自动处理引入文件,并且支持热更新。