我试图在Vue组件中使用Choices.js.组件编译成功,但随后会触发错误:

[vue router]无法解析异步组件默认值:

在浏览器中,我看到:

未定义ReferenceError文档

我认为这与Nuxt的SSR有关.js?我只需要 Select .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>

在classic 的Vue中,这将很好地工作,所以我仍然在努力掌握如何获得Nuxt.js必须这样工作.

你知道我哪里做错了吗?

谢谢

推荐答案

启动Nuxt项目时,这是一个常见错误;-)

The Choices.js lib is available only for client-side! So Nuxt tried to renderer from server-side, but from Node.js window.document doesn't exist, then you have an error.
nb: window.document is only available from the browser renderer.

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


Update:

Nuxt >= 2.9.0开始,必须使用<client-only>元素,而不是<no-ssr>:

<template>
  <div>
    <client-only placeholder="loading...">
      <your-component>
    </client-only>
  </div>
</template>

要了解更多信息,请参阅nuxt docs:https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component

Vue.js相关问答推荐

Pinia+Vue 3状态react 性-StoreToRef的替代方案

在 Nuxt3 中使用 Vue3 vue-ganntastic 插件

Nuxt3 / Vue3 - 当属性更改时如何动态更改渲染组件?

Vue 3使用计算(computed)属性对象获取图像信息,在模板中呈现值时变为NaN

在 Vue.js 2.6 的 Javascript 中访问 的内容

Vue,Composition API:如何从react 式转换中跳过深度嵌套的属性?

如何在 Vue.js 中添加动态组件/部分

如何将对象作为props传递并让组件更新子对象

可以同时使用 Tailwind css 和 Bootstrap 4 吗?

如何为使用 Vuex store的 Vue 表单组件编写 Jest 单元测试?

如何为 Vue 项目设置 lint-staged?

如何在不实例化根实例的情况下使用 vue 组件?

Vue.js 中 Chrome 和 Datalist 的性能问题

将自定义部分添加到 v-autocomplete 下拉列表

更新 vue.js 中的数据属性/对象

Vue:如何在按钮单击时调用 .focus()

输入文件 Select 事件在 Select 同一文件时未触发

简单的点击功能不触发

使用 Vuetify 的可滚动数据表

mount() 仅在组件 Vue.js 上运行一次