解决vue+elementui项目打包后样式变化问题

 更新时间:2020年08月03日 11:21:37   作者:Arlisol  
这篇文章主要介绍了解决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: '<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项目打包后样式变化问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 浅谈mvvm-simple双向绑定简单实现

    浅谈mvvm-simple双向绑定简单实现

    本篇文章主要介绍了浅谈mvvm-simple双向绑定简单实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 基于vue中解决v-for使用报红并出现警告的问题

    基于vue中解决v-for使用报红并出现警告的问题

    下面小编就为大家分享一篇基于vue中解决v-for使用报红并出现警告的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue使用预渲染代替SSR的方法

    Vue使用预渲染代替SSR的方法

    这篇文章主要介绍了Vue使用预渲染代替SSR的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • echarts 使用formatter 修改鼠标悬浮事件信息操作

    echarts 使用formatter 修改鼠标悬浮事件信息操作

    这篇文章主要介绍了echarts 使用formatter 修改鼠标悬浮事件信息操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue2路由动画效果的实现代码

    Vue2路由动画效果的实现代码

    本篇文章主要介绍了Vue2路由动画效果的实现代码,可以根据不同的路径去改变动画的效果,有兴趣的可以了解一下
    2017-07-07
  • vue-自定义组件传值的实例讲解

    vue-自定义组件传值的实例讲解

    今天小编就为大家分享一篇vue-自定义组件传值的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • VUE预渲染及遇到的坑

    VUE预渲染及遇到的坑

    这篇文章主要介绍了VUE预渲染及遇到的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 浅谈vue-router路由切换 组件重用挖下的坑

    浅谈vue-router路由切换 组件重用挖下的坑

    今天小编就为大家分享一篇浅谈vue-router路由切换 组件重用挖下的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Element Input输入框的使用方法

    Element Input输入框的使用方法

    这篇文章主要介绍了Element Input输入框的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • VUE实现Studio管理后台之鼠标拖放改变窗口大小

    VUE实现Studio管理后台之鼠标拖放改变窗口大小

    这篇文章主要介绍了VUE实现Studio管理后台之鼠标拖放改变窗口大小 的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的工作或学习具有一定的参考价值,需要的朋友可以参考下
    2020-03-03

最新评论