vue 打包上线后 所使用的css3渐变属性丢失的问题解决方案
最近在做vue项目的时候用到了css3渐变属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了。如下图:
.join{
position:absolute;
left:1rem;
bottom:0.6rem;
width:40%;
height:2.1875rem;
display: block;
color:#ffffff;
margin:auto;
border-radius:1.09375rem;
text-decoration: none;
line-height:2.1875rem ;
background:-webkit-gradient(linear, 100% 0, 0 0, from(#e68865), to(#ea6731));
background:-webkit-linear-gradient(left, #e68865, #ea6731);
background:-moz-linear-gradient(left, #e68865, #ea6731);
background:-o-linear-gradient(left, #e68865, #ea6731);
background:linear-gradient(left, #e68865, #ea6731);
}
网上搜索了很多解决方案,最后找到个类似的,可能是optimize-css-assets-webpack-plugin
这个插件的问题,其实解决办法很简单,只需要在这个属性前后加一个特殊注释即可,如下图:
.join{
position:absolute;
left:1rem;
bottom:0.6rem;
width:40%;
height:2.1875rem;
display: block;
color:#ffffff;
margin:auto;
border-radius:1.09375rem;
text-decoration: none;
line-height:2.1875rem ;
/*! autoprefixer: off */
background:-webkit-gradient(linear, 100% 0, 0 0, from(#e68865), to(#ea6731));
background:-webkit-linear-gradient(left, #e68865, #ea6731);
/* autoprefixer: on */
background:-moz-linear-gradient(left, #e68865, #ea6731);
background:-o-linear-gradient(left, #e68865, #ea6731);
background:linear-gradient(left, #e68865, #ea6731);
}
再次打包上线,渐变属性恢复了。开心~~~
vue 打包上线后 所使用的css3渐变属性丢失的问题解决方案的更多相关文章
- nginx处理vue打包文件后的跨域问题
起因 在vue文件打包后,项目脱离了vue配置的反向代理配置,还是会报跨域的错误,或者直接打不开本地文件, 但是此刻我们想打开打包后的文件,测试一下文件有没有错误,因为经常会存在开发阶段没有问题,打包 ...
- Vue打包上线部署
一.路径问题 1.脚手架+webpack打包通过npm run build,但是后台tomcat部署上线的时候,会衍生出一些问题,比如,路径问题(因为在项目中,我们使用了绝对路径,这里必须要使用相对路 ...
- VUE打包发布后无法访问js、css资源
在vue开发中,本地测试以及测试环境中都没有遇到问题,当发布生产,有虚拟路径时,便出现js.css均报错404: 首先在config的index.js文件中,将assetsPublicPath修改为' ...
- 关于vue打包上线遇到的坑
打包上线经常会经常遇到路径找不到,页面空白,那么下面我们就解决一下. 第一步.先找到config目录的index.js 改成如上图红框标注所示 第二步.找到build下的utils.js文件 加上如上 ...
- vue打包项目后使用-webkit-line-clamp: 2;这个属性不生效?
在项目中要实现多行省略,-webkit-line-clamp: 2;打包后不生效,使用下面的方法: word-break: break-all; text-overflow: ellipsis; di ...
- -webkit-line-clamp、-webkit-box-orient vue 打包部署后不起作用??
场景分析:实际开发中,文字描述过长,需要两行或三行显示缩略显示: 实现过程: 实现过程遇到的问题:打包到线上后发现并没有-webkit-box-orient属性,导致省略号并没有按预期展示: 解决方法 ...
- VUE打包上线优化
1.将vue vue-router vuex 尽量使用CDN externals: { 'vue':'Vue', 'vue-router':'VueRouter', 'vuex':'Vuex', 'a ...
- Vue打包上线之后CSS没有压缩和不生效
前言 当用vue-cli 脚手架 打包压缩时,发现打包出来的css 没有被压缩, 所以查阅了些资料,下面用这个方法解决: 1.首先注释掉webpack.prod.conf.js中下面的代码 new O ...
- Vue项目上线后刷新报错404问题(apache,nginx,tomcat)
转自:https://www.cnblogs.com/sxshaolong/p/10219527.html 很简单,需要 服务器端 加个配置文件,然后 重启服务就好了,记住一定要 重启服务,否则无效!
随机推荐
- javaweb阶段几个必会面试题
1.jsp的9大隐式对象 response(page):response对象是javax.servlet.http.HttpServletResponse对象的一个实例.就像服务器创建request对 ...
- progress组件(进度条)
progress组件:进度条 progress组件的属性: percent:类型:number 设置百分比 (0~100) show-info:类型:布尔 在进度条右侧显示百分比 border-rad ...
- svn 服务器操作
mkdir /var/svn/svnrepos/aaasvnadmin create /var/svn/svnrepos/aaasvnserve -d -r /var/svn/svnrepos #启动 ...
- Linux内核调试方法总结之coredump
什么是core dump? 分析core dump是Linux应用程序调试的一种有效方式,像内核调试抓取ram dump一样,core dump主要是获取应用程序崩溃时的现场信息,如程序运行时的内存. ...
- fedora bash shell 为什么不能使用ctrl+c了?
无法使用ctrl+c? 原来是因为, 在shell中, 为了选择和复制粘贴文字内容的方便, 对shell的快捷键进行了设置, 将复制设置为 ctrl+c了, 将zhantie设置为ctrl+v了 所以 ...
- JS text节点无innerHTML
在线预览 text节点无innerHTML这个属性!!! 如果直接修改text节点的属性(data,nodeValue,textContent),或者使用js原生的修改text节点的内容的方法都会将H ...
- springmvc 读写分离
推荐第四种:https://github.com/shawntime/shawn-rwdb 4种不方的读写分离实现方法 http://blog.csdn.net/lixiucheng005/artic ...
- windows10下安装docker报错:error during connect
详细报错信息如下: C:\Users\zig>docker info error during connect: Get http://%2F%2F.%2Fpipe%2Fdocker_engin ...
- 博客图片上传picgo工具安装配置github图传使用
摘要 对于每一个写博客的人来说,图片是至关重要.这一路经历了多次图片的烦恼,之前选择了微博个人文章那里粘贴图片的方式上传,感觉也挺方便的.但是由于新浪的图片显示问题,如果header中不设置 标签就不 ...
- delphi 函数isiconic 函数 判断窗口是否最小化
http://blog.sina.com.cn/s/blog_66357ab901012t2h.html delphi 函数isiconic 函数 判断窗口是否最小化 (2012-05-26 22:0 ...