在使用ant-design-vue的包时样式是可以生效的但是如果我需要用到less文件时会报一个异常

当然这个异常其实很清晰的说明了什么问题看错误信息里面有issues地址，看来问题不止我们遇见了可以找到地址访问看看别人怎么说的我已经找出来了

https://github.com/ant-design/ant-motion/issues/44

根据上面链接反应出要解决此问题有两种方案

1、降低less版本到3.0以下（此办法不友好，不建议使用）

2、开启javascript，配置lessl-oader

接下来我们要使用webpack文件来配置下，新建vue.config.js相关说明可以参考官网地址如下

https://cli.vuejs.org/zh/config/

重新启动下npm run serve  就已经解决了less配置问题

此时我们看下NetWork里面加载的文件，发现我们加载的库被全局加载进来了总共有12.8M的包，这样肯定是不行肯定会想方法优化下，能不能按需加载

呢。

此时找到了babel官方网站的确有配置参数可以解决  https://vue.ant.design/docs/vue/introduce-cn/

按照官网配置下配置完发现控制台和浏览器还有个报错

此时直接安装一下babel依赖就好了

npm i --save-dev babel-plugin-import

完成就重新运行下此时app.js就只有3.9M了，此时就解决了按需加载的问题

自定义配置Webpack和Babel配置的更多相关文章

  1. webpack中babel配置 --- runtime-transform和babel-pollfill

    webpack - babel配置 babel是一个javascript编译器,是前端开发中的一个利器.它突破了浏览器实现es标准的限制,使我们在开发中可以使用最新的javascript语法. 通过构 ...

  2. react+webpack基础学习配置

    最近学习react,公司的项目是使用create-react-app来搭建的,而我想重新使用node+mysql+react来搭建一个新的博客. 今天尝试从零开始搭建一个webpack+react项目 ...

  3. webpack window下配置的hello world

    峰回路转 一区九折 先看效果:(此效果是webpack执行完之后会生成build文件夹已经它下面的index.html,点击index.html就是下图的效果)

  4. 笔记：配置 webpack dev server

    笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...

  5. webpack，Babel，babel-loader的关系

    本文将要介绍 webpack,Babel,babel-loader 的关系.理清楚他们各自做了什么事情. 通常我们新建一个项目,会先配置webpack,然后配置babel:babel是一个编译工具,实 ...

  6. webpack使用babel

    几个月没用webpack都忘了好多了. webpack构建前端,使用时除了entry/output,就是plugins和module.loaders,还有本地测试的devServer. npm ins ...

  7. webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-transform-react-jsx' 问题

    下文是网上找到的方法,是因为版本冲突的原因,参照后安装7版本解决 cnpm install -D babel-loader@ babel-core babel-preset-env 一. 问题描述 在 ...

  8. 配置React的Babel 6和Webpack 2环境

    Facebook的一帮子工程师在忙碌之余开发除了一套前段UI框架React.这个框架最大的有点就在于让UI的开发都基于组件,这样View都是根据props和state变化的. 项目地址:https:/ ...

  9. babel 7.x 结合 webpack 4.x 配置

    今天在学习webpack的使用的时候,由于学习的教程是2018年初的,使用的是 webpack 3.x 和 babel 6.x ,然后学习的过程中出现的了很多问题. 解决问题之后,总结一下新的 bab ...

随机推荐

  1. 微信小程序 —— 微信小程序解析html富文本插件wxParse

    下载并把wxParse放到小程序的目录中 github下载地址:https://github.com/icindy/wxParse 一.基本使用方法 1. Copy文件夹wxParse,把wxPars ...

  2. 消息中间件的研究（二） RabbitMQ应用场景分析

    分析一下六个场景下RabbitMQ的应用: 1.爬虫 2.智能家居云平台 3.电子商务系统 4.实时监控系统 5.海量日志的分布式处理 6. 智能交通管控平台中数据分析子系统     1.爬虫     ...

  3. 练习十六：Python日期格式应用（datetime）

    练习:关于python日期格式应用练习.用python方法如何输出指定格式形式的日期 这里用到datetime模块,datetime模块重新封装了time模块,提供了更多接口,提供的类包括:date, ...

  4. PHP中文手册1

    1.入门 关于换行 PHP 会在输出时自动删除其结束符 ?>后的一个换行.该功能主要是针对在一个页面中嵌入多段 PHP 代码或者包含了无实质性输出的 PHP 文件而设计,与此同时也造成了一些疑惑 ...

  5. hdu 5489——Removed Interval——————【删除一段区间后的LIS】

    Removed Interval Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  6. Authentication to host '***‘' for user 'root' using method 'mysql_native_password' failed with message: Reading from the stream has failed.

    如下场景: 一个页面中需要用户填入文字信息,并上传图片,上传图片是单独调用上传文件接口的,当用户上传图片后,马上点保存,就会报错. Authentication to host '***‘' for ...

  7. laydate 显示结束时间不小于开始时间

    jsp: <div class="form-group">    <label >交易时间:</label>        <input ...

  8. 360 so动态脱壳

    环境及工具 手机    : 中兴 U887 系统版本:   Android 2.3.5 工具    :   IDA pro 6.6 .0101Editor 版权声明:未经许可,随便转载 目前so加壳有 ...

  9. jqGrid中multiselect: true 操作checkbox

    在jqGrid中设置multiselect: true可以实现全选的操作,但怎么设置被选中的checkbox里面的值呢,做法如下:jQuery("#listTable").jqGr ...

  10. Hadoop之—— WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform...

    [hadoop@hadoop000 hadoop]$ ldd --version ldd (GNU libc) 2.12 Copyright (C) Free Software Foundation, ...