解决vue打包后css位置错乱的问题—

今天遇到了一个比较坑的问题，使用vue2+webpack3在开发环境的时候样式是好的，但是打包之后放在生产环境样式就错乱了。

后来打开浏览器看了一下，原来是因为自己写的一个全局的css文件位置错乱了，我使用第三方的框架是YDUI（http://vue.ydui.org/），

截图中的1就是我自己的样式，2就是ydui的样式，可以看到2的样式在下面肯定会覆盖掉我的样式，但是这种情况在开发环境就不存在。

我自己的样式在App.vue中引用的

于是百度了好一阵子，有的是说是在main.js里把第三方框架的样式放在最上面，但是打包试了一下，发现不行，因为ydui的样式也有一部分是动态添加到<style>中去的

也有说升级webpack4，使用min-css-extract-plugin的，但是升级webpack4一大堆坑，各种报错，最终果断放弃这个方法。

解决方案：

于是我还是回归问题本身，既然开发环境是好的，那就去配置开发环境的配置文件里看看，会有什么不同

果然，在util.js这个文件中发现了这么一个方法generateLoaders(),发现这个方法就是控制css、scss、less打包的，options.extract这个参数是在生产环境的时候为true，

因此生产环境打包时就走走1这一步，而开发环境就会走2这一步，差别就在这里，最终我把这个判断去掉了，果然就解决了。

解决vue打包后css位置错乱的问题——小结相关推荐

[vue] 怎么解决vue打包后静态资源图片失效的问题？
[vue] 怎么解决vue打包后静态资源图片失效的问题? 上面蛮多回答感觉像开玩笑似的,静态资源图片失效分几种情况. 1.确定线上环境是否在根路径上,配置资源根目录,vue-cli2 和 vue-cl ...
vue上线后图片不显示_解决Vue打包后访问图片/图标不显示的问题
大家可否遇到过 npm run build打包后,项目在线上运行时,资源文件 (图片.图标)不显示的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件打开此文件后 ...
vue打包后css路径_Vue打包后访问静态资源路径问题
Vue打包后访问静态资源路径问题 Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们 ...
解决vue打包后静态资源路径错误的问题
vue项目完成的最后一步就是打包部署上线,但是打包部署的过程往往不是那么一帆风顺的,现将遇到问题和解决方案记录如下. 图片路径问题起因: 页面中引入资源的方式往往有如下几种 * HTML标签中直接引 ...
解决Vue打包后背景图片路径错误问题
1.原因解析当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...
解决vue打包后提示文件过大的警告
首先先列出我这个出现的三个警告第一个是css有问题第二个是js文件过大第三个是css文件过大解决 :针对第一个css的警告在我项目里用的element ui 出现这个警告是因为我vue组件里 ...
vue打包后CSS中引用的背景图片不显示问题
vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件修改成为如下所示内容: 添加红框中的内容即可 ...
解决Vue打包后放到部署到服务器运行时出现Loading chunk * failed 错误
最近一直在捣鼓的Springboot+Vue 前后端分离项目,Vue 前端项目打包部署到Nginx 服务器访问时,点击导航栏切换一直报错: 原因:路由懒加载的情况下,访问当前应用进行路由跳转时都是实时 ...
解决vue打包后去掉console
方法一:使用插件 babel-plugin-transform-remove-console npm install babel-plugin-transform-remove-console -- ...

解决vue打包后css位置错乱的问题——小结

解决vue打包后css位置错乱的问题——小结相关推荐

最新文章

热门文章