解决Vue打包上线之后部分CSS不生效的问题
首先注释掉webpack.prod.conf.js中下面的代码
new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }),
然后在utils.js中添加, minimize:true
const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap, minimize:true } }
然后重新打包传到线上,解决!
以上这篇解决Vue打包上线之后部分CSS不生效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
解决vue-cli 打包后自定义动画未执行的问题
在vue项目中,想实现无缝向上滚动的自定义动画效果 webpack 打包后动画未执行,就是你npm run build生成的dist中动画未生效 @-webkit-keyframes move { 0%{ top:0; } 100% { top:-500px; } } 解决方法:在vue项目中找到build文件夹下的vue-loader.conf.js,将extract:isProduction 改为extract:false 自定义动画就会生效了 以上这篇解决vue-cli 打包后自定义动画未
-
vue-cli2打包前和打包后的css前缀不一致的问题解决
啰嗦一哈 最近基于vue-cli2 学习webpack,将vue-cli2的webpack配置强撸了一遍,感觉身体已被掏空...但还是收获不少的,起码掌握了webpack的一些基本套路.开发环境和生产环境的概念.根据不同的环境写不同的webpack配置.和一些常用插件的用法等. 问题来了 基于vue-cli不用自己配置webpack开撸项目是十分爽的,但当我在撸得正爽的时候发现一个问题,就是项目打包前和打包后的css前缀不一致的,如下(浏览器:Chrome): --给app.vue下的img添加
-
解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号, 但使用webpack打包以后,"微软雅黑"的双引号被错误解析并多加了个反斜杠,导致字体不生效. 解决方法: 尝试了一下去掉双引号,也就是font-family:微软雅黑,这样浏览器并不会把中文字体用unicode编码,样式也可以正常显示.但为了更好的兼容性,这里
-
解决vue打包之后静态资源图片失效的问题
1.问题描述 在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到(404错误),这些图片可以是以src引入的图片, 也可以是css中定义的背景图片.图片能否显示与你的静态资源文件存在位置和引入的路径直接相关,下面是我的其中一个项目的文件存放以及路径书写方式! 2.解决方法之一 静态资源static存放位置放在src目录下 你可能会问为什么放在src目录下?放在跟src同级目录下不可以吗?好吧,一开始我也是放在src同
-
解决Vue打包上线之后部分CSS不生效的问题
首先注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), 然后在utils.js中添加, minimize:true const cssLoader = { loader: 'css-loader', option
-
解决vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了 如一个简单css语句 .welcome { width: 420px; height: 235px; background: url(../img/welcome.jpg) 0 0 no-repeat; 但是打包后路径成了却出现404访问不到的问题. 解决的办法很简单 build路径下utils.js文件 // Extract CSS when that option is speci
-
解决Vue打包之后文件路径出错的问题
这里以vue-cli创建的项目为例 1.文件路径不对 找到config文件夹下的index.js文件修改一下位置 看清楚是 build(上边还有个dev 是开发环境下的配置,不需要改动)下的 assetsPublicPath :将'/'改为'./' 2.背景图片路径不对 在css中写的background-img的路径出错 需要找到build文件夹下的utils.js,修改一下位置 加入红框内字段即可. 以上这篇解决Vue打包之后文件路径出错的问题就是小编分享给大家的全部内容了,希望能给大家一个
-
解决Vue打包后访问图片/图标不显示的问题
大家可否遇到过 npm run build 打包后,项目在线上运行时,资源文件 (图片.图标)不显示 的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件 打开此文件后你会头晕,因为都是打包压缩过的css代码,不过没关系 ,关键字搜索url 检查该url路径是否匹配正确 对比后惊人发现!!! 因此在url路径前添加../../就OK了, 但是 很麻烦,每次打包后都要进行二次加工吗? 并不是!!! 2.自动添加 ../../ 的方法 打开build/utils.j
-
解决vue 打包发布去#和页面空白的问题
1.vue项目中config文件下index.js中打包配置 build: { // Template for index.html index: path.resolve(__dirname, '../yiTownWebApp/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../yiTownWebApp'), assetsSubDirectory: 'static', assetsPublicPath: '/yiTown
-
解决vue打包 npm run build-test突然不动了的问题
今天遇到一件很奇葩的事情 输入npm run build-test 突然停在这不动了 what? 不动了?! 后来google了一下 大家都是人才 运行一下这句话 就动了!! npm config set registry http://registry.cnpmjs.org 补充知识:vue_test_unit_e2e常见问题npm run unit单元测试和npm run e2e集成测试问题 vue项目要进行unit和e2e常见问题 localStorage is not available
-
解决vue打包项目后刷新404的问题
vue打包项目后刷新404的问题Nginx配置 server { listen 80; server_name localhost; index index.html; root /root/dist; location / { root /root/dist; try_files $uri $uri/ /index.html =404; } } 以上这篇解决vue打包项目后刷新404的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vu
-
解决vue打包后vendor.js文件过大问题
第一步.cdn引入各种包 index.html中cdn的方式引入vue.vuex.axios.element-ui.vue-router等包,如下图: 第二步.在使用vue等包的地方,注释掉import引入 在所有使用vue的地方注释掉引入的vue等包,但是Vue.use(axios).Vue.use(VueRoter).Vue.use(vuex)等依然要使用,除了Vue.use(ElementUI), 如果加上这句话,还是会打包element-ui到vendor.js文件中 在main.js
-
解决vue打包报错Unexpected token: punc的问题
项目中有一个功能模块是使用Vue写的,然后蛋疼的来了,写Vue的同事走了,今天需要改,懵逼状态啊,这是什么?代码还没看懂,就给我出了一个Exception.记录一下,蛋疼历程. ERROR in static/js/app.33254a875dd731a0b538.js from UglifyJs Unexpected token: punc (() [./src/mixin/mixin.js:6,8][static/js/app.33254a875dd731a0b538.js:13,19] 好
随机推荐
- 详解Vue2.0之去掉组件click事件的native修饰
- Java递归读取文件例子_动力节点Java学院整理
- Asp.net使用SignalR实现酷炫端对端聊天功能
- 提高PHP编程效率的方法
- Django中的cookie与session操作实例代码
- 网站开发防止中文乱码需要了解的codepage的重要性小结
- mysql 5.7 docker 主从复制架构搭建教程
- Android ApplicationInfo 应用程序信息的详解
- 深入理解JavaScript程序中内存泄漏
- Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
- JS仿flash上传头像效果实现代码
- 三十分钟快速掌握C# 6.0知识点
- PowerShell中字符串分行显示的两种方法技巧
- 自己动手手写jQuery插件总结
- html文件中jquery与velocity变量中的$冲突的解决方法
- 实现dedecms图集单击图片翻页的功能
- Android自定义控件eBook实现翻书效果实例详解
- 解析Android数据加密之异或加密算法
- Android实现网页图片浏览功能
- 晨顺科技为您提供免费全能空间服务