解决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 动态调整图片尺寸实现代码
Dec 28 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
基于input框覆盖掉数字英文的实例讲解
Jul 21 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
上海无线电三厂简史修改版
2021/03/01 无线电
怎样在PHP中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
vue组件与复用详解
2018/04/08 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
python读出当前时间精度到秒的代码
2019/07/05 Python
python自动生成model文件过程详解
2019/11/02 Python
零基础学python应该从哪里入手
2020/08/11 Python
python 爬虫请求模块requests详解
2020/12/04 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
土木工程应届生求职信
2013/10/31 职场文书
淘宝活动策划方案
2014/02/06 职场文书
模具毕业生推荐信
2014/02/15 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
小学运动会报道稿
2014/10/04 职场文书
陕西导游词
2015/02/04 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书