解决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 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 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的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
PHP插入排序实现代码
2013/04/04 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
javascript window.opener的用法分析
2010/04/07 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
zTree树形插件异步加载方法详解
2017/06/14 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
学校十一活动方案
2014/02/01 职场文书
优秀员工评语
2014/02/10 职场文书
网络信息安全承诺书
2014/03/26 职场文书
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL