解决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 相关文章推荐
js innerHTML 改变div内容的方法
Aug 03 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
详解js中==与===的区别
Jan 08 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 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中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
财务情况说明书范文
2014/05/06 职场文书
工作简历的自我评价
2019/05/16 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
Python字符串的转义字符
2022/04/07 Python
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js
CSS的calc函数用法小结
2022/06/25 HTML / CSS
mysqldump进行数据备份详解
2022/07/15 MySQL