博主刚刚解决了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/>'
})

————————————————

版权声明:本文为CSDN博主「Arlisol」的原创文章。
原文链接:https://blog.csdn.net/Dg_Zing/article/details/87907796

vue+elementui项目打包后样式变化问题的更多相关文章

  1. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

  2. 将vue的项目打包后通过百度的BAE发布到网上的流程

    经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. ...

  3. vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

    从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...

  4. vue项目打包后想发布在apache www/vue 目录下

    使用的是vue-element-admin做示例,可以参考Vue项目根据不同运行环境打包项目,其他项目应该大同小异. 使用vue-router的browserHistory模式,配置mode: 'hi ...

  5. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  6. vue项目打包后运行报错400如何解决

    昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...

  7. Vue+elementUI build打包部署后字体图标丢失问题

    错误描述:Vue+elementUI  build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...

  8. vue 使用webpack打包后路径报错以及 alias 的使用

    一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...

  9. 关于vue+element-ui项目的分页,返回默认显示第一页的问题解决

    关于vue+element-ui项目的分页,返回默认显示第一页的问题解决     问题描述 当前页面如下: 然后点击页码跳到第3页,然后在第三页点击页面链接跳转到新的页面 然后在新页面点击返回按钮,返 ...

随机推荐

  1. jackson 学习资料

    源代码托管地址 https://github.com/FasterXML/jackson https://github.com/FasterXML/jackson-docs http://www.st ...

  2. js查询手机号码格式是否正确

    直接上代码,复制开用 let regExp = /^([-]{,}\-)?[-]{,}$|^?[|||7||][-]\d{}$/; //验证的手机号码格式 //this.ruleForm.adminC ...

  3. Apache Kafka是数据库吗?

    最近思路有些枯竭,找些务虚的话题来凑.本文内容完全来自于Martin Kelppmann在2019年Kafka伦敦峰会上的演讲.顺便提一句,Kelppmann是<Designing Data-I ...

  4. MySQL Execution Plan--将范围扫描转换为等值查询

    将大于或小于的范围查询装换为等值查询 在生产环境,经常会遇到需要对Worker表进行多次尝试的业务,超过一定重试次数后抛弃或使用其他方式处理,在查找满足重试条件数据时,通常会使用“小于”运算符并伴随排 ...

  5. elasticsearch使用ansj分词器

    目前elasticsearch的版本已经更新到7.0以上了,不过由于客户需要5.2.2版本的elasticsearch,所以还是需要安装的,并且安装上ansj分词器.在部署ES的时候,采用容器的方式进 ...

  6. PAT甲级1013题解——并查集+路径压缩

    题目分析: 本题初步浏览题目就知道是并查集的模板题,数据输入范围N为1~1000,则M的范围为0~1000^2,通过结构体记录每一对连线的关系,p[]数组记录每个节点的跟,对于k次查询,每次都要重新维 ...

  7. 类型转换的时候,.valueOf()和.parseX(),.Xvalue()的区别

    .valueOf()返回的是包装类(Wrapper Class)中的一些类型:而.parseX()返回的是基本数据类型,如int,char,double等.其参数应该是String类型. .Xvalu ...

  8. oVirt部署

    所有前提建议: 关闭防火墙.selinux,配置hosts,计算机名使用域名 ovirt-engine部署 yum install http://resources.ovirt.org/pub/yum ...

  9. Gradle 知识点

    mac 系统中,下载的 Gradle 压缩包解压后存储的文件夹:/Users//.gradle/wrapper/dists 当Gradle运行时,会根据settings.gradle的配置情况,构建一 ...

  10. vue router 中,children 中 path 为空字符串的路由,是默认打开的路由(包括在 el-tabs 中嵌套路由的情况)

    详见该页面的最后一个代码块:https://router.vuejs.org/zh/guide/essentials/nested-routes.html#%E5%B5%8C%E5%A5%97%E8% ...