Nuxt 按需引入 iview 3 提示:The client-side rendered virtual DOM tree

我尝试在 Nuxt 2 中 按需引入 iview 3 插件,下面是我的配置过程

nuxt.config.js

plugins: [
    { src:  '@/plugins/iview', ssr:  false  },
],
build: {
    babel: {
        "plugins": [["import",  {

            "libraryName":  "iview",

            "libraryDirectory":  "src/components"

        }]]
    }
},

plugins/iview.js

import  Vue  from  'vue'
import  { Button }  from  'iview';

Vue.component('Button',  Button);

page/test.vue 渲染一个 Button 按钮测试

<template>
    <Button>测试按钮</Button>
</template>

npm run dev 以后出现了如下两种现象:

  1. 按钮分两个阶段渲染出来,先渲染出原生 button 按钮,没有样式,然后才渲染出 iview 的Button 按钮(这种情况只出现在刷新页面时,如果通过路由跳转进入页面则直接渲染出 iview 按钮)

    渲染阶段1:
    渲染阶段1.png
    渲染阶段2:
    QQ截图20200127103245.png

  2. 控制台发出警告,提示客户端渲染与服务端渲染 DOM 不匹配:QQ截图20200127103259.png

尝试搜寻了一些答案,大部分建议将 ssr 属性变为 true: { src: '@/plugins/iview', ssr: false }, -> { src: '@/plugins/iview', ssr: true}, 但是如果这样设置的话,项目启动提示找不到 import:QQ截图20200127105957.png

后面我又尝试利用 element-ui 来测试按需加载功能,没有出现如上的现象,难道 iview 3 目前还是不能完全支持 ssr 吗?

阅读 4.5k
2 个回答

已解决,
build 需同步配置

build: {
    transpile: [/^iview/],
}

我也遇到过这个问题,不过我把在beforeMount里面请求的列表数据换到mounted里面就消失了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题