在使用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. PHPGGC学习----理论

    本文首发于先知:https://xz.aliyun.com/t/5450 PHPGGC 是一款能够自动生成主流框架的序列化测试payload的工具,类似 Java 中的 ysoserial, 当前支持 ...

  2. Linux查找文件内容（grep）

    转载链接:http://www.eguidedog.net/linux-tutorial/05-grep.php grep是Linux命令行下常用于查找过滤文本文件内容的命令.最简单的用法是: gre ...

  3. 浅谈WebService的调用

    0.前言 前段时间,公司和电信有个合作,产品对接电信的某个平台,使用了WebService接口的调用,实现了业务受理以及单点登录.终于使用到了WebService,楼主还是比较兴奋的,目前功能已经上线 ...

  4. 学习笔记：MDN的JavaScript

    JavaScript 第一步 什么是JavaScript? 每次当你浏览网页时不只是显示静态信息—— 显示即时更新的内容, 或者交互式的地图,或 2D/3D 图形动画,又或者自动播放视频等,你可以确信 ...

  5. Python接入支付宝进行PC端支付

    1.  支付宝开放平台登录,使用支付宝账号登录 https://open.alipay.com/platform/home.htm 2.选择沙箱模式 [支付宝提供了测试环境] https://docs ...

  6. MATLAB之易经卜卦程序+GUI

    MATLAB之易经卜卦程序+GUI   日月为易,刚柔相推. 是故易有太极,是生两仪,两仪生四象,四象生八卦,八卦定吉凶,吉凶生大业.是故法象莫大乎天地,变通莫大乎四时,悬象著明莫大乎日月.   本文 ...

  7. Android 使用GreenDao 添加字段，删除表,新增表操作

    GreenDao 给我个人感觉 比一般的ORM框架要好很多,虽然说上手和其他的比起来,较复杂,但是如果使用熟练以后,你会爱上这个框架的 用这些ORM 框架给我的感觉都是,当升级时,都需要进行数据库所有 ...

  8. Piwik-2.16.1 （OpenLogic CentOS7.2）

    平台: CentOS 类型: 虚拟机镜像 软件包: centos7.2 piwik devops log analysis monitoring open-source 服务优惠价: 按服务商许可协议 ...

  9. System Center Configuration Manager 2016 域准备篇（Part3）

    步骤2.将CM16加入域 注意:在ConfigMgr服务器(CM16 )上以本地管理员身份执行以下操作 手动加入域,请登录CM16.启动Windows文件资源管理器 右键单击This-PC,然后选择 ...

  10. PagedList.Mvc只有一行时不显示分页

    PagedList.Mvc默认总是显示分页,可以通过设置DisplayMode在只有一行时不显示分页 @Html.PagedListPager(Model, page => Url.Action ...