Nuxt iView（view-design）按需加载

本文说的主要是按需加载，全部加载的方式和使用就不说了，其实按需加载只需要更改相关配置就可以了。

1、首先更改plugins文件夹中的内容

全部导入时的代码：

import Vue from 'vue';
import iView from 'view-design';
import './theme.less';  // 自定义主题 没有可以忽略

Vue.use(iView);

按需加载的代码：

import Vue from 'vue';
import './theme.less';  // 自定义主题 没有可以忽略

// 导入基础模块 如：分页、表单等等，根据自己使用到的来
import {
    Page,
    Spin,
    Badge,
    Button,
    Card,
    Divider,
    Tabs,
    TabPane,
    Breadcrumb,
    BreadcrumbItem,
    Steps,
    Input,
    Radio,
    Checkbox,
    Table,
    Select,
    Option,
    DatePicker,
    Transfer,
    Upload,
    Form,
    FormItem,
    Message,
    Modal,
    Tooltip,
    Carousel,
    CarouselItem,
    Switch
} from 'view-design'  // 我用的是iView4版本的名字改为了view-design

const components = {
    Page,
    Spin,
    Badge,
    Button,
    Card,
    Divider,
    Tabs,
    TabPane,
    Breadcrumb,
    BreadcrumbItem,
    Steps,
    Input,
    Radio,
    Checkbox,
    Table,
    Select,
    Option,
    DatePicker,
    Transfer,
    Upload,
    Form,
    FormItem,
    Message,
    Modal,
    Tooltip,
    Carousel,
    CarouselItem,
    Switch
};

const IviewModule = {
    ...components,
    iSwitch: Switch,  // html里面有switch标签，所以Switch组件使用时必须是i-switch
}
// 循环注册全局组件
Object.keys(IviewModule).forEach(key => {
    Vue.component(key, IviewModule[key])
})

// 将iview模块挂载到vue对象上，只挂载能使用到的，这里Notice我就没用到
Vue.prototype.$Message = Message;
Vue.prototype.$Modal = Modal;
Vue.prototype.$Spin = Spin;

2、更改nuxt.config.js

module.exports = {
  plugins: [
    // 这是我的插件目录，因为我配置了自定义主题，一般是 plugins/iview.js
    { src: '~plugins/my-theme/index', ssr: false },  // ssr要设置为false，不然后面会报ESModule错误
  ],
  build: {
    babel: {
            babelrc: true,  // 默认为false,改为true
            cacheDirectory: undefined,
            presets: ['@nuxt/babel-preset-app']
        }
  }
}

3、配置babel
安装babel-plugin-import插件，npm install babel-plugin-import -D
然后新建.babelrc文件夹

{
  "plugins": [["import", {
    "libraryName": "view-design",
    "libraryDirectory": "src/components",
  }]]
}

ok，到这里就配置完成了，可以使用webpack打包分析工具看看配置前后差别，对比一下。
可以执行nuxt build -a命令，打包完成后会自动分析结果，比较直观，就是下面图片的样子。

image.png

================================= 更新 ================================

后面发现问题，iview（view-design）使用的时候会报错，错误信息如下：
[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.

这其实是使用vue-design的时候，没有开启服务端渲染，导致服务端生成的页面DOM内容和客户端不一致，会引起页面生命周期调用两次，解决办法：
在nuxt.config.js中开启服务端渲染

plugins: [
  { src: '~plugins/my-theme/index', ssr: true }
]

如果只这样写，你可能还会遇到一个错误

image.png

意思是ES Module在服务端不被支持，接下来还需要修改一下配置

build: {
  transpile: [/^view-design/]
}

最后编辑于：2020.09.30 09:41:36

Nuxt iView（view-design） 按需加载

Nuxt iView（view-design）按需加载