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

【问题标题】：How to load a resource on the client side only in Nuxt.js如何仅在 Nuxt.js 中在客户端加载资源
【发布时间】：2018-02-04 00:18:20
【问题描述】：

我正在尝试在 Nuxt.js 之上使用 Tone.js 构建一个应用程序。 Tone.js 需要浏览器的 Web 音频 API，并且随着 Nuxt 在服务器端呈现内容，我的构建一直失败。

Nuxt 在plugin documentation 中解决了这个问题，我在我的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 未定义。

我的问题似乎是 same as this one 是否有帮助的附加上下文

【问题讨论】：

标签： d3.js vue.js nuxt.js

【解决方案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>

【讨论】：