解决vue+elementui项目打包后样式变化问题


Posted in Javascript onAugust 03, 2020

博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效。利用搜索引擎,

找到了问题所在以及解决办法:

main.js中的引入顺序决定了打包后css的顺序,组件内的样式没有生效可能是被第三方组件样式覆盖了,所以把第三方组件放在前面引入,router放在后面引入,就可以实现组件样式在第三方样式之后渲染。

代码如下:

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//先引入第三方组件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//后引入router
import router from './router'
import store from './vuex/store'

Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

这样修改之后样式问题就解决了,打包后的版本与开发版本显示一样。

补充知识:element-ui打包的坑爹之处 !!!必看三遍!!!

最近笔者打包element-ui出现如下问题:

ERROR in static/js/0.4cad92088cb8dc6e7afd.js from UglifyJs
Unexpected token: punc (() [./~/_element-ui@1.4.10@element-ui/packages/row/src/row.js:24,0][static/js/0.4cad92088cb8dc6e7afd.js:496,9]


ERROR in static/js/1.09dee4594487889c4524.js from UglifyJs
Unexpected token: punc (() [./~/_element-ui@1.4.10@element-ui/packages/row/src/row.js:24,0][static/js/1.09dee4594487889c4524.js:511,9]


ERROR in static/js/2.94e8ce8144ca11abff4c.js from UglifyJs
Unexpected token: punc (() [./~/_element-ui@1.4.10@element-ui/packages/row/src/row.js:24,0][static/js/2.94e8ce8144ca11abff4c.js:496,9]


ERROR in static/js/8.d374e413b093a5ae555a.js from UglifyJs
Unexpected token: operator (>) [./~/_element-ui@1.4.10@element-ui/src/mixins/emitter.js:2,0][static/js/8.d374e413b093a5ae555a.js:89,32]


Build failed with errors.

解决:找到node_modules目录下面的element-ui目录的名字在build下面的------->webpack.base.conf.js里面配置:

{
 test: /\.js$/,
 loader: 'babel-loader',
 include: [

resolve('src'),


resolve('test'),


resolve('/node_modules/_element-ui@1.4.10@element-ui/src'),   //和下面截图文件名字对应起来即可正常打包!!!


resolve('/node_modules/_element-ui@1.4.10@element-ui/packages')
 ]
}

解决vue+elementui项目打包后样式变化问题

以上这篇解决vue+elementui项目打包后样式变化问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 出生日期和身份证判断大全
Nov 13 Javascript
jquery中输入验证中一个不错的效果
Aug 21 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
vue - props 声明数组和对象操作
Jul 30 Javascript
vue实现PC端分辨率适配操作
Aug 03 #Javascript
浅谈JavaScript中的“!!”作用
Aug 03 #Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 #Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 #Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 #Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 #Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 #Javascript
You might like
PHP安全配置
2006/10/09 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
php实现的mongodb操作类
2015/05/28 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
php强制下载文件函数
2016/08/24 PHP
PHP学习记录之数组函数
2018/06/01 PHP
实例讲解PHP表单处理
2019/02/15 PHP
js 内存释放问题
2010/04/25 Javascript
UserData用法总结 lanyu出品
2010/07/01 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
置业顾问岗位职责
2014/03/02 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
工程质量承诺书
2014/03/27 职场文书
购房协议书范本
2014/04/11 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
cf战队收人口号
2014/06/21 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript