[youzan/vant]nuxt中引用Toast,刷新时报错

2024-05-22 183 views
4

在nuxt中,引用Toast,服务端渲染报错

vant插件代码 plugins/vant

import Vue from 'vue';

import { Checkbox, Button, Dialog, Popup, Toast } from 'vant';

Vue.use(Checkbox);
Vue.use(Button);
Vue.use(Dialog);
Vue.use(Popup);
Vue.use(Toast);

页面组件代码 page:

import { Toast } from 'vant';

...

Toast.loading({
      message: '加载中...'
});

nuxt配置代码 nuxt.config.js:

  build: {
    vendor: ['vant'],
    babel: {
      plugins: ['transform-vue-jsx', ['component', {
          libraryName: 'vant',
          styleLibraryName: 'vant-css',
          style: true
        }]]
    },

  ...

  plugins: [ '~/plugins/vant'  ]

1539074641 1

回答

7

感谢反馈,下个版本会修复此问题

5

已在 1.3.5 版本修复

8

太高效了,为你打call

5

单例模式下完美运行。但是如果是多个toast运行时,代码会由于在服务端运行,Toast直接return空,导致一些方法如toast.clear()的未定义的问题。

0

发了个 1.3.7 版本,可以试下哈

4

nice

8

Toast多实例模式存在内存泄露的问题,实例可以复用,toast清除之后应该删除浏览器生成的DOM

7

@gongzhibin 可以新开个 issue

6

ok