Vue项目本地run与build后样式不同,build后样式不生效
来源:互联网 发布:js圆形进度条插件 编辑:程序博客网 时间:2024/06/05 04:35
在Vue项目开发过程中遇到两次,本地运行正常,build后在服务器上样式没有生效,或者在本地的效果没有正常显示,
下面一一说明:
一、多个相同样式文件同时存在项目中
现象:修改组件时,在项目中复制了一个组件重命名后进行修改,在本地执行正常,后打包上传,无法展示正常效果。
解决过程:在本地试图修改总是不见效果,在控制台查看样式仍是之前的样式,把其中一处样式在所有相关组件中修改,打包上传后样式生效,这说明是旧的样式在打包时覆盖了新的样式。将旧组件删除后解决上述问题。
原因猜测:因为相同组件包含不同样式时,无法判断哪份样式时在后面渲染,如果旧样式刚好打包后在后面渲染,则会覆盖掉新写的样式。在本地执行时,因为样式没有打包,访问页面时渲染的都是组件自身样式,所以不会出现上述问题。
二、全局(main.js)引用样式
现象:在全局引入了Element UI 样式,在header组件中修改部分样式,在本地执行正常,后打包上传,无法展示正常效果。
解决过程:因为在项目中段发现该问题,以为是后续的样式造成的影响(虽然我也认为可能性极小),删除新写的组件,没有效果。运行一段时间之前的代码,项目正常运行,这迫使我回想中间这段时间对项目做了什么?...............,除了新写了一些组件,还将一些配置信息从index.js中转移到了main.js中,测试发现果然是这里出现了问题。配置中同时出现了Element UI 样式文件引用,还有router的引用,将yang样式引用放在router引用后解决问题。
原因猜测:不正常的样式显示的还是组件原始的样式,由此猜测router加载时会加载组件样式,将样式文件在router后引用会将router加载时渲染的样式覆盖掉,所以建议将router的引用放在最后面。
以上原因猜测是个人分析,大家有新见解请在下方留言。
最后,在每个组件的样式中记得添加 'scoped'
下面一一说明:
一、多个相同样式文件同时存在项目中
现象:修改组件时,在项目中复制了一个组件重命名后进行修改,在本地执行正常,后打包上传,无法展示正常效果。
解决过程:在本地试图修改总是不见效果,在控制台查看样式仍是之前的样式,把其中一处样式在所有相关组件中修改,打包上传后样式生效,这说明是旧的样式在打包时覆盖了新的样式。将旧组件删除后解决上述问题。
原因猜测:因为相同组件包含不同样式时,无法判断哪份样式时在后面渲染,如果旧样式刚好打包后在后面渲染,则会覆盖掉新写的样式。在本地执行时,因为样式没有打包,访问页面时渲染的都是组件自身样式,所以不会出现上述问题。
二、全局(main.js)引用样式
现象:在全局引入了Element UI 样式,在header组件中修改部分样式,在本地执行正常,后打包上传,无法展示正常效果。
解决过程:因为在项目中段发现该问题,以为是后续的样式造成的影响(虽然我也认为可能性极小),删除新写的组件,没有效果。运行一段时间之前的代码,项目正常运行,这迫使我回想中间这段时间对项目做了什么?...............,除了新写了一些组件,还将一些配置信息从index.js中转移到了main.js中,测试发现果然是这里出现了问题。配置中同时出现了Element UI 样式文件引用,还有router的引用,将yang样式引用放在router引用后解决问题。
原因猜测:不正常的样式显示的还是组件原始的样式,由此猜测router加载时会加载组件样式,将样式文件在router后引用会将router加载时渲染的样式覆盖掉,所以建议将router的引用放在最后面。
以上原因猜测是个人分析,大家有新见解请在下方留言。
最后,在每个组件的样式中记得添加 'scoped'
阅读全文
0 0
- Vue项目本地run与build后样式不同,build后样式不生效
- vue-cli构建项目 npm run build打包后怎么在本地查看效果
- Vue.js 项目build后路径问题
- 关于vue-cli项目npm run build后,index.html无法在浏览器打开
- QT修改qss文件后导致样式表不生效
- vue build前图片样式注意事项
- Vue之通过http服务打开build后的项目
- vue项目使用font-awesome,build后路径问题
- 在vue项目中webpack打包后字体不生效
- vue-cli 项目打包 npm run build
- 前端框架Vue(12)——如何将 vue-cli 项目打包压缩(npm run build)后放到服务器
- vue-cli 打包压缩(npm run build)文件后,默认根目录修改
- vue build 后资源路径不对
- 项目中css样式不生效
- npm run build 打包后,如何运行在本地查看效果
- dojo样式不生效
- vue打包后样式会变化
- Vue项目 build构建
- 指针到底能不能修改其指向的常量字符串?&向NULL地址copy数据
- c++ 学习2
- VsCode插件安装及推荐
- Java调用本地应用程序(Windows)
- linux ar命令用法
- Vue项目本地run与build后样式不同,build后样式不生效
- 树的双重心 重心+dp
- CMakefile语法笔记,详解
- HTTP 协议中的 Transfer-Encoding
- bookstrap datatable 取值问题
- ubuntu下安装composer到使用composer安装laravel的过程及常见问题汇总
- MyBatis同时操作多个库
- Java 并发编程(六)线程池Executors与ThreadPoolExecutor
- 64-ia-32架构优化手册(8)