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

Question

我尝试在 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：
   
   渲染阶段2：
   

2. 控制台发出警告，提示客户端渲染与服务端渲染 DOM 不匹配：

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

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

Answer 1

已解决，
build 需同步配置

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

Answer 2

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