使用nuxt.js服务端渲染框架，引入iview2后，使用任何组件都会报错，而且打包之后组件样式都消失

Question

我做毕设项目遇到的一个问题

使用nuxt框架的Nuxt.js + Express构建了一个项目

引入iview2后,组件在dev模式下都可以正常显示,但是控制台会报错

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. 

我想着报错还正常显示就忍一下...

然后npm run build之后，再npm start发现组件的样式都没了，想知道怎么解决这个问题

在iView github上发现一个关闭的issues，跟我遇到的一样，但是关闭了，也没解决,就一起贴上来了，原issues:https://github.com/iview/ivie...
(没解决怎么关闭了...)

iView 版本号

2.0.0-rc.5

操作系统/浏览器 版本号

window10/Chrome 56

Vue 版本号

2.2.4

能够复现问题的在线示例（重要）

这个服务渲染的在线demo不好整，大致步骤是：

vue init nuxt/starter myapp
cd myapp
yarn

npm run dev
启动后，创建插件：

import Vue from 'vue'

if (process.BROWSER_BUILD) {
  Vue.use(require('iview'))
}
在nuxt.config.js引入

plugins: ['~plugins/vue-iview'],
css: ['iview/dist/styles/iview.css'],
此时一切正常。iview组件样式都能正常引入，然后在index.vue里加入如下代码：

<div style="background:#eee;padding: 20px">
        <Card :bordered="false">
            <p slot="title">无边框标题</p>
            <p>无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充。</p>
        </Card>
    </div>

使用四五个组件浏览器都会出现警告：

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. 

复现步骤

问题现象，以及你期望的结果是怎样的?

不要出现警告

Answer 1

作者已经回答了, iView不支持ssr, 想用vue组件库, 又支持ssr的, 可以用element-ui

Answer 2

https://github.com/iview/ivie...

https://github.com/iview/ivie...

Answer 3

遇到同样的问题，你要在这个配置里里面，设置ssr:true就可以了