vue + elementui项目打包后样式变化问题的解决方法 - 行业资讯

　　介绍

这篇文章主要讲解了vue + elementui项目打包后样式变化问题的解决方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

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

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

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

代码如下:

主要。js

//Vue构建版本加载“进口”命令//(运行时只或独立)被设置在webpack.base。配置一个别名。
　　从& # 39;进口Vue Vue # 39;
　　从& # 39;进口程序。/应用# 39;//先引入第三方组件
　　从& # 39;进口ElementUI element-ui& # 39;
　　进口& # 39;element-ui/lib/theme-chalk index.css& # 39;//后引入路由器
　　从& # 39;进口路由器。/路由器# 39;
　　从& # 39;进口商店。/vuex/商店# 39;
　　
　　Vue.use (ElementUI)
　　Vue.config。productionTip=false/* eslint-disable没有新*/新Vue ({
　　艾尔:& # 39;#应用# 39;
　　路由器,
　　商店,
　　组件:{应用},
　　模板:& # 39;& lt;应用程序/祝辞& # 39;
　　})

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

<强> element-ui打包的坑爹之处! ! !必看三遍! ! !

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

静态误差/js/0.4 cad 92088 cb8dc6e7afd。js从UglifyJs
意想不到的令牌:标点(()[。/~/_element-ui@1.4.10@element-ui/包/行/src/row.js: 24日0][静态/js/0.4 cad 92088 cb8dc6e7afd。js: 496 9)

静态误差/js/1.09 dee4594487889c4524。js从UglifyJs
意想不到的令牌:标点(()[。/~/_element-ui@1.4.10@element-ui/包/行/src/row.js: 24日0][静态/js/1.09 dee4594487889c4524。js: 511 9)

静态误差/js/2.94 e8ce8144ca11abff4c。js从UglifyJs
意想不到的令牌:标点(()[。/~/_element-ui@1.4.10@element-ui/包/行/src/row.js: 24日0][静态/js/2.94 e8ce8144ca11abff4c。js: 496 9)

静态误差/js/8. d374e413b093a5ae555a。js从UglifyJs
意想不到的令牌:操作符(在)[。/~/_element-ui@1.4.10@element-ui/src/混合/emitter.js: 2 0][静态/js/8. d374e413b093a5ae555a。js: 89、32)

构建失败错误。

<强>解决:找到node_modules目录下面的element-ui目录的名字在构建下面的- - - - - -→webpack.base.conf。js里面配置:
{ 　　测试:/\ . js/美元, 　　装载机:& # 39;babel-loader& # 39; 　　包括:[ 　　解决(& # 39;src # 39;), 　　解决(& # 39;测试# 39;), 　　解决(& # 39;/node_modules/_element-ui@1.4.10@element-ui/src # 39;),//和下面截图文件名字对应起来即可正常打包! ! ! 　　解决(& # 39;/node_modules/_element-ui@1.4.10@element-ui/包# 39;) 　　] 　　}

看完上述内容,是不是对vue + elementui项目打包后样式变化问题的解决方法有进一步的了解,如果还想学习更多内容,欢迎关注行业资讯频道。
vue + elementui项目打包后样式变化问题的解决方法