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

Question

我正尝试在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如果它是有用的附加背景

Answer 1

代替进口插件，在您的page.vue可以初始化Tone.js在mounted()方法，因为这个功能只运行从客户端。

<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> 

：

例page/test.vue文件的