javascript Nuxt.js 中的“文档未定义”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46058544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"document is not defined" in Nuxt.js
提问by Michael Giovanni Pumo
I am trying to use Choices.jswithin a Vue component. The component compiles successfully, but then an error is triggered:
我正在尝试在 Vue 组件中使用Choices.js。组件编译成功，但随后触发了一个错误：
[vue-router] Failed to resolve async component default: ReferenceError: document is not defined
[vue-router] 无法解析异步组件默认值：ReferenceError: document is not defined
In the browser I see:
在浏览器中，我看到：
ReferenceError document is not defined
ReferenceError 文档未定义
I think this has something to do with the SSR in Nuxt.js? I only need Choices.js to run on the client, because it's a client only aspect I guess.
我认为这与 Nuxt.js 中的 SSR 有关系吗？我只需要 Choices.js 在客户端上运行，因为我猜它只是客户端的一个方面。
nuxt.config.js
nuxt.config.js
build: {
vendor: ['choices.js']
}
AppCountrySelect.vue
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>
In classic Vue, this would work fine, so I'm very much still getting to grips with how I can get Nuxt.js to work this way.
在经典的 Vue 中，这会很好地工作，所以我仍然非常了解如何让 Nuxt.js 以这种方式工作。
Any ideas at all where I'm going wrong?
任何想法我哪里出错了？
Thanks.
谢谢。
回答by Nicolas Pennec
It's a common error when you start a Nuxt project ;-)
这是启动 Nuxt 项目时的常见错误；-)
The Choices.jslib is available only for client-side! So Nuxt tried to renderer from server-side, but from Node.js window.documentdoesn't exist, then you have an error.
nb: window.documentis only available from the browser renderer.
该Choices.jsLIB仅适用于客户端！所以 Nuxt 尝试从服务器端渲染，但是从 Node.jswindow.document不存在，那么你有一个错误。
nb：window.document仅在浏览器渲染器中可用。
Since Nuxt 1.0.0 RC7, you can use <no-ssr>element to allow your component only for client-side.
从Nuxt 1.0.0 RC7 开始，您可以使用<no-ssr>element 来允许您的组件仅用于客户端。
<template>
<div>
<no-ssr placeholder="loading...">
<your-component>
</no-ssr>
</div>
</template>
take a look at the official example here: https://github.com/nuxt/nuxt.js/blob/dev/examples/no-ssr/pages/index.vue
看看这里的官方示例：https: //github.com/nuxt/nuxt.js/blob/dev/examples/no-ssr/pages/index.vue
回答by Michal Skop
The accepted answer (while correct) was too short for me to understand it and use it correctly, so I wrote a more detailed version. I was looking for a way to use plotly.js + nuxt.js, but it should be the same as the OP's problem of Choice.js + nuxt.js.
接受的答案（虽然正确）太短了，我无法理解并正确使用它，所以我写了一个更详细的版本。一直在找plotly.js+nuxt.js的使用方法，但是应该和OP的Choice.js+nuxt.js的问题一样。
MyComponent.vue
我的组件.vue
<template>
<div>
<no-ssr>
<my-chart></my-chart>
</no-ssr>
</div>
</template>
<script>
export default {
components: {
// this different (webpack) import did the trick together with <no-ssr>:
'my-chart': () => import('@/components/MyChart.vue')
}
}
</script>
MyChart.vue
MyChart.vue
<template>
<div>
</div>
</template>
<script>
import Plotly from 'plotly.js/dist/plotly'
export default {
mounted () {
// exists only on client:
console.log(Plotly)
},
components: {
Plotly
}
}
</script>
回答by Mariel Quezada
I found that now the no-ssr is replace by , i am using echart and have the same problem but now it′s working!
我发现现在 no-ssr 被替换了，我正在使用 echart 并且遇到了同样的问题，但现在它可以工作了！
<client-only>
<chart-component></chart-component>
</client-only>
回答by Yusuf Adeyemo
You need to add it as a plugin and then disable SSR for it.
您需要将其添加为插件，然后为其禁用 SSR。
As document and window are not defined on the server side.
由于文档和窗口未在服务器端定义。
Your nuxt.config.js should look like below
您的 nuxt.config.js 应如下所示
plugins: [
{ src: '~/plugins/choices.js', ssr: false }
],
回答by Puwka
<script>
import Choices from 'choices.js'
export default {
name: 'CountrySelect',
created () {
if(process.client) {
console.log(this.$refs, Choices)
const choices = new Choices(this.$refs.select)
console.log(choices)
}
}
}
</script>
I guess this should help, nuxt will touch insides of computed after it renders on server and window will be defined
我想这应该会有所帮助，nuxt 在服务器上呈现后会触及计算的内部，并且将定义窗口
