在使用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. 使用jmeter往指定文件中插入一定数量的数据(转)

    有一个需求,新建一批账号,把获取的账号相关信息存入文本文件,当文本文件保存的数据达到一定的数量,就自动停止新建账号. 分析下需求: 1.把账号信息保存到文件,需要使用bean shell脚本(bean ...

  2. JMeter - REST API测试 - 完整的数据驱动方法（翻译）

    https://github.com/vinsguru/jmeter-rest-data-drivern/tree/master 在本文中,我想向您展示一种用于REST API测试的数据驱动方法.如果 ...

  3. hive与hbase关联

    进入hbase: hbase shell 进入HIVE: hive hbase中建一张t_student_info表,添加两个列族 create 't_student_info','st1','st2 ...

  4. python排序(冒泡、直接选择、直接插入等)

    冒泡排序 冒泡法:第一趟:相邻的两数相比,大的往下沉.最后一个元素是最大的. 第二趟:相邻的两数相比,大的往下沉.最后一个元素不用比. #冒泡排序 array = [1,5,6,2,9,4,3] de ...

  5. how to keep impact-crusher in good condition

    how to keep impact-crusher in good condition Why we have to maintenance impact crusher? As we talked ...

  6. 如何设计企业移动应用 by宋凯

    移动应用设计内部培训 by宋凯 企业移动应用的特点:简约.效率.增强ERP与环境的结合.及时.安全.企业内社交. 一句话定义你的移动应用:然后围绕这句话来设计你的APP. 一:如何定义你的应用: 1, ...

  7. win10命令行压缩zip文件

    1.下载winzip,下载winzip command line(官方) 2.使用命令 "C:\Program Files\WinZip\WZZIP.exe" C:\test\a. ...

  8. vscode 插件todo-highlight

    简介 Highlight TODO,FIXME or any annotations within your code. 资源 https://marketplace.visualstudio.com ...

  9. sql 删除字段 出错

    1. 删除字段:   ALTER TABLE TALE_NAME DROP COLUMN nn;   2.报错: 消息 5074,级别 16,状态 1,第 1 行对象'DF__WorkOrder__I ...

  10. C# 常见的字符串操作

    例1: 遍历字符串中的每一个字符: string src = "aa-b - c-a - d-e- d-e- a- a-b-cc"; foreach(char c in src) ...