我尝试在 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 以后出现了如下两种现象:
- 按钮分两个阶段渲染出来,先渲染出原生 button 按钮,没有样式,然后才渲染出 iview 的Button 按钮(这种情况只出现在刷新页面时,如果通过路由跳转进入页面则直接渲染出 iview 按钮)
渲染阶段1:
渲染阶段2: - 控制台发出警告,提示客户端渲染与服务端渲染 DOM 不匹配:
尝试搜寻了一些答案,大部分建议将 ssr 属性变为 true: { src: '@/plugins/iview', ssr: false }, -> { src: '@/plugins/iview', ssr: true}, 但是如果这样设置的话,项目启动提示找不到 import:
后面我又尝试利用 element-ui 来测试按需加载功能,没有出现如上的现象,难道 iview 3 目前还是不能完全支持 ssr 吗?
已解决,
build 需同步配置