vue项目打包之后样式错乱问题,如何处理
最近公司做的这个项目,要大量修改element里面的css样式,所以项目打包之后
会出现样式和本地开发的时候样式有很多不一样,原因可能是css加载顺序有问题,样式被覆改了。
所以在mian.js里面这样修改:
‘./APP’和'./router'放在element css的后面,router放到最后
还有就是每个vue组件里的style要加scoped,这很关键,起到css不被组件之间重叠的作用。
最后再次打包,会发现和本地开发的样式一模一样,开心的不得了,哈哈!
vue项目打包之后样式错乱问题,如何处理的更多相关文章
- 【转】vue项目打包部署——nginx代理访问
我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...
- vue项目打包采坑
1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...
- Vue项目打包后背景图片路径错误
vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...
- vue项目打包后运行报错400如何解决
昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...
- vue项目打包,生成dist文件夹,如何修改文件夹的名字
vue项目打包之后的dist文件目录是如下 如果想要修改dist或则static文件名称,需要打开config / index.js build: { // Template for index.ht ...
- vue项目打包踩坑记
基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目 ...
- vue项目打包-2-九五小庞
vue项目打包 一.终端运行命令 npm run build 二.打包成功的标志与项目的改变,如下图: 3.点击index.html,通过浏览器运行,出现以下报错,如图: 四.那么应该如何修改呢?具体 ...
- vue项目打包成html,在本地点击直接能打开
默认情况下vue项目打包后,本地打开index.html是空白的,有报错.Failed to load resource: net::ERR_FILE_NOT_FOUND 这时需要修改config-& ...
- vue 项目不显示样式 排版错乱
vue中的css 样式都在index.html中 看这里是否有导入css
随机推荐
- 【CF704D】Captain America(上下界网络流)
[CF704D]Captain America(上下界网络流) 题面 CF 洛谷 题解 如果没有限制,似乎就不用做了...因为我们只需要贪心的选择代价较小的颜色就行了. 那么我们不妨假设染红色的代价较 ...
- 前端之移动端库和框架bootstrap
学习移动端场景下的js事件:制作移动端特效常用的js库:介绍移动端常用开发框架Bootstrap:介绍动态样式语言less.sass.stylus的基本使用. 移动端js事件 移动端的操作方式和PC端 ...
- PI对于两个SAP客户端通道的了解
你把你的报文放到ESR的MM里面试一下就知道了 日期格式之类的,可能有转换的你要输入2019-05-13这种 OA到PI不选,都是到一个系统,由PI再来分流 如果你要做成由OA来选的,就要参考类似于 ...
- WPF MVVM,Prism,Command Binding
1.添加引用Microsoft.Practices.Prism.Mvvm.dll,Microsoft.Practices.Prism.SharedInterfaces.dll: 2.新建文件夹,Vie ...
- WPF图片,DataGrid等实现圆角
<Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.Ro ...
- java基础(21):异常
1. 异常 什么是异常?Java代码在运行时期发生的问题就是异常. 在Java中,把异常信息封装成了一个类.当出现了问题时,就会创建异常类对象并抛出异常相关的信息(如异常出现的位置.原因等). 1.1 ...
- Tomcat8史上最全优化实践
Tomcat8史上最全优化实践 1.Tomcat8优化 1.1.Tomcat配置优化 1.1.1.部署安装tomcat8 1.1.2 禁用AJP连接 1.1.3.执行器(线程池) 1.1.4 3种运行 ...
- 移动应用性能测试剖析以及PerfDog与其他工具的对比分析11.22
商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. 导语: 在IT.互联网及游戏行业,软件测试都是一个重要且不可或缺的过程,测试是软件生命周期中的一个重要阶段,是软件质量保证的关键步骤.目 ...
- Typescript基础(3)——类
前言 今天继续typescript的学习,开始ts类的学习. 类 类的实现 在ES6中新增了类的概念.我们先看ES6中类的实现. class Person { constructor(name,age ...
- Python、PyCharm、django环境搭建
本文又名—— 响应式页面——从无到有(一) 事情是这样的,期末小组作业,需要我把大佬们写的页面搞成响应式的,但是我连py都没用过,只好现学…… 文章目录 一.前言 1.1 环境介绍 1.2 前期尝试 ...