解决vue2中使用elementUi打包报错的问题


Posted in Javascript onSeptember 22, 2020

bug1.找不到element-ui/lib/theme-default/index.css

解决:修改路径为 element-ui/lib/theme-chalk/index.css

原因:elementUi升级时遗留bug

bug2: ERROR in static/js/app.77ab8a3664d32f2b9c76.js from UglifyJs

Unexpected token: operator (>) [./~/element-ui/src/mixins/emitter.js:2,0][assets/js/0.498ce690b229694d8858.js:3947,32

解决:打开build目录下webpack.base.conf.js文件

添加

{
 test: /\.js$/i,
 loader: 'babel-loader',
 include: [
  resolve('src'),
  resolve('test'),
  resolve('node_modules/element-ui/src/mixins/emitter.js'),
 ],
},

若重复build不断有类似错误,添加

test: /\.js$/i,
 loader: 'babel-loader',
 include: [
  resolve('src'),
  resolve('test'),
  resolve('node_modules/element-ui/src'),
  resolve('node_modules/element-ui/packages')
 ],
},

补充知识:vue脚手架加载element-ui报错的解决方法

引入 import 'element-ui/lib/theme-chalk/index.css' 后

各种报错,解决方法

1、cnpm install css-loader style-loader file-loader -D

2、 在webpack.config.js中增加一行rules

{test: /\.(eot|woff|ttf)$/, loader: "file-loader" }

3、npm run dev

注意: {test: /\.css$/,loader: 'style-loader!css-loader'}这一行不必添加,我加上这一行后反而运行错误,这样写也不行 {test: /\.css$/,loader: 'style!css'}

以上这篇解决vue2中使用elementUi打包报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
javascript流程控制语句集合
Sep 18 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 #Javascript
小程序实现录音功能
Sep 22 #Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 #Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 #Javascript
JS实现无限轮播无倒退效果
Sep 21 #Javascript
js+canvas绘制图形验证码
Sep 21 #Javascript
vue中路由跳转不计入history的操作
Sep 21 #Javascript
You might like
php学习之运算符相关概念
2011/06/09 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
原创javascript小游戏实现代码
2010/08/19 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
会计专业毕业生自我评价
2013/09/25 职场文书
计生专干事迹
2014/05/28 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书