我正在尝试使用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,如果它是有用的附加上下文
答案 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>