elementui 样式渲染的慢_解决vue+elementui项目打包后样式变化问题
博主刚刚解决了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: ''
})
这样修改之后样式问题就解决了,打包后的版本与开发版本显示一样。
补充知识: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项目打包后样式变化问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
elementui 样式渲染的慢_解决vue+elementui项目打包后样式变化问题相关推荐
- vue+webpack项目打包后背景图片加载不出来问题解决
vue+webpack项目打包后背景图片加载不出来问题解决 参考文章: (1)vue+webpack项目打包后背景图片加载不出来问题解决 (2)https://www.cnblogs.com/mica ...
- elementui 表格英文加数字排序_解决vue elementUI中table里数字、字母、中文混合排序问题...
1.使用场景 使用elementUI中的table时,给包含数字字母中文的名称等字段排序 例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)-> ...
- vue+elementui项目打包后样式变化问题
main.js中的引入顺序决定了打包后css的顺序,组件内的样式没有生效可能是被第三方组件样式覆盖了. 把第三方组件 ElementUI放在前面引入,router放在后面引入,就可以实现组件样式在第三 ...
- vue项目打包后样式错乱
问题 在开发的过程中,我们喜欢用里面写某个组件的独有样式.然而项目在打包之后运行在服务器中时,我们会发现scoped并没有生效.这时候有可能会出现样式错乱的情况. 问题产生的原因 vue的项目在打包后 ...
- (javascript)vue项目打包后,写的覆盖element的样式无效了。这是什么原因?
问题: (javascript)vue项目打包后,写的覆盖element的样式无效了.这是什么原因?描述: 在开发模式模式下,写的覆盖样式都有效,打包后就无效,请问下是什么原因? main.js里的c ...
- 快速解决Vue项目打包后文件过大问题
快速解决Vue项目打包后文件过大问题 为什么打包后文件过大? 如何快速解决 一.路由懒加载[使用es6提案的import()方式] 二.CDN引入 为什么打包后文件过大? 移动app项目,使用vue- ...
- nginx配置解决vue单页面打包文件大,首次加载慢的问题
nginx配置解决vue单页面打包文件大,首次加载慢的问题 参考文章: (1)nginx配置解决vue单页面打包文件大,首次加载慢的问题 (2)https://www.cnblogs.com/golo ...
- php项目index页面空白,如何解决vue项目打包后打开页面空白的问题
这篇文章主要介绍了vue项目打包后打开空白解决办法,内容挺不错的,现在分享给大家,也给大家做个参考. 网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通 ...
- 解决Vue编译和打包时频繁内存溢出情况CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory...
解决Vue编译和打包时频繁内存溢出情况CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 如上图所示:频繁出现此 ...
最新文章
- IOS开发中发送Email的两种方法
- java grizzly_java grizzly实现http服务器
- MIPS介绍与MIPS汇编的常用指令
- jvm类加载机制_JVM 类加载机制
- mysql 存储过程月单拆天单_MySQL之存储过程按月创建表的方法步骤
- Linux 零拷贝方案
- 杭电 hdu 3343
- 电缆桥架安装规范标准_电缆桥架安装标准分享
- C#之判断Mysql数据库是否存在
- python pandas常用函数_python:pandas常用功能函数操作
- 英语语法——万法归宗
- 百度大脑通用物体识别使用攻略
- 微信小程序的background-image使用
- win10强制关闭飞行模式_让你的电脑1台变n台 win10自带虚拟机Hyper-V讲解
- 报错:Unable to check if JNs are ready for formatting
- vs2017 开发工具颜色_2017年排名前50位的开发人员工具
- c语言做绘图软件,大佬们,小菜鸟想问一问用vc编译器做简易画图软件
- 合作伙伴、客户与微软一起,成为数字化转型“三胞胎”
- Java学习----前端3
- C++11初篇(快速了解)
热门文章
- c语言编程用牛拉法求指数函数,IEEE各类节点测试系统原始数据
- N4-暴力破解3(验证码绕过 on server)
- 如果你构造了一个统计量其分布不容易确定,如何通过实验的方法给出其相应分布的分位数?
- 【poj2891】 Strange Way to Express Integers
- 关于 Token 过期问题的两种解决方案
- 开源数据采集技术对比
- Smooth-AP: Smoothing the Path Towards Large-Scale Image Retrieval(翻译)
- Ubuntu16.04下安装pip
- 你会选墙纸吗?---颜色墙纸教你如何选墙纸!
- 荒岛求生游戏html5,荒岛求生H5