“文档未定义”在Nuxt.js

Question

我想在Vue组件中使用Choices.js。该组件编译成功，但随后就会触发一个错误：

[vue-router] Failed to resolve async component default: ReferenceError: document is not defined

在浏览器中我看到：

ReferenceError document is not defined

我觉得这事做与SSR在Nuxt.js？我只需要Choices.js在客户端上运行，因为它只是客户端的一个方面。

nuxt.config.js

build: { 
    vendor: ['choices.js'] 
} 

AppCountrySelect.vue

<script> 
import Choices from 'choices.js' 

export default { 
    name: 'CountrySelect', 
    created() { 
    console.log(this.$refs, Choices) 
    const choices = new Choices(this.$refs.select) 
    console.log(choices) 
    } 
} 
</script> 

在经典Vue公司，这会工作得很好，所以我非常仍然得到认真处理我如何让Nuxt.js以这种方式工作。

任何想法，我要去哪里错了？

谢谢。

Answer 1

这是一个常见的错误，当你启动一个项目Nuxt ;-)

的Choices.js LIB仅适用于客户端！所以Nuxt试图从服务器端渲染器，但从Node.js window.document不存在，那么你有一个错误。
nb：window.document仅适用于浏览器渲染器。

由于Nuxt 1.0.0 RC7，您可以使用<no-ssr>元素来允许您的组件仅用于客户端。

<template> 
    <div> 
    <no-ssr placeholder="loading..."> 
     <your-component> 
    </no-ssr> 
    </div> 
</template> 

看看这里的官方例子：https://github.com/nuxt/nuxt.js/blob/dev/examples/no-ssr/pages/index.vue