elementui样式渲染的慢_解决vue+elementui项目打包后样式变化问题

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

找到了问题所在以及解决办法&＃xff1a;

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

代码如下&＃xff1a;

main.js

// The Vue build version to load with the &＃96;import&＃96; command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from &＃39;vue&＃39;

import App from &＃39;./App&＃39;

//先引入第三方组件

import ElementUI from &＃39;element-ui&＃39;

import &＃39;element-ui/lib/theme-chalk/index.css&＃39;

//后引入router

import router from &＃39;./router&＃39;

import store from &＃39;./vuex/store&＃39;

Vue.use(ElementUI)

Vue.config.productionTip &＃61; false

/* eslint-disable no-new */

new Vue({

el: &＃39;#app&＃39;,

router,

store,

components: { App },

template: &＃39;&＃39;

})

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

补充知识&＃xff1a;element-ui打包的坑爹之处 &＃xff01;&＃xff01;&＃xff01;必看三遍&＃xff01;&＃xff01;&＃xff01;

最近笔者打包element-ui出现如下问题&＃xff1a;

ERROR in static/js/0.4cad92088cb8dc6e7afd.js from UglifyJs

Unexpected token: punc (() [./~/_element-ui&＃64;1.4.10&＃64;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&＃64;1.4.10&＃64;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&＃64;1.4.10&＃64;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&＃64;1.4.10&＃64;element-ui/src/mixins/emitter.js:2,0][static/js/8.d374e413b093a5ae555a.js:89,32]

Build failed with errors.

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

{

test: /\.js$/,

loader: &＃39;babel-loader&＃39;,

include: [

resolve(&＃39;src&＃39;),

resolve(&＃39;test&＃39;),

resolve(&＃39;/node_modules/_element-ui&＃64;1.4.10&＃64;element-ui/src&＃39;), //和下面截图文件名字对应起来即可正常打包&＃xff01;&＃xff01;&＃xff01;

resolve(&＃39;/node_modules/_element-ui&＃64;1.4.10&＃64;element-ui/packages&＃39;)

]

}

以上这篇解决vue&＃43;elementui项目打包后样式变化问题就是小编分享给大家的全部内容了&＃xff0c;希望能给大家一个参考&＃xff0c;也希望大家多多支持脚本之家。