如何仅在 Nuxt.js 中在客户端加载资源

Question

我正在尝试在 Nuxt.js 之上使用 Tone.js 构建一个应用程序。Tone.js 需要浏览器的 Web Audio API，当 Nuxt 在服务器端渲染内容时，我的构建一直失败。

Nuxt 在插件文档中解决了这个问题，我在nuxt.config.js文件编写中也遵循了这种方法：

module.exports = {
  plugins: [{src: '~node_modules/tone/build/Tone.js', ssr: false }],
}

但是，这会导致此错误：[nuxt] Error while initializing app TypeError: Cannot read property 'isUndef' of undefined。查看 Tone 的源代码，我很确定这是因为我得到了它，因为代码仍在服务器端执行。

我见过将 js 文件放入static文件夹并检查的解决方案，process.browser但两者都导致Tone未定义。

如果附加上下文有帮助，我的问题似乎与此问题相同

Answer 1

您可以在page.vue中的mounted()方法中初始化Tone.js，而不是导入插件，因为此功能仅从客户端运行。

page/test.vue文件示例：

<template>
  <div>
    Tone.js
  </div>
</template>

<script>
  export default {
    mounted() {
      var Tone = require("Tone");
      var synth = new Tone.Synth().toMaster();
      synth.triggerAttackRelease("C4", "8n");
    }
  }
</script>