如何仅在Nuxt.js

时间:2017-08-25 22:11:39

标签: d3.js vue.js nuxt.js

我正在尝试使用Nuxt.js上的Tone.js构建一个应用程序。 Tone.js需要浏览器的Web Audio 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,如果它是有用的附加上下文

1 个答案:

答案 0 :(得分: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>