最近在做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渐变属性丢失的问题解决方案的更多相关文章

  1. nginx处理vue打包文件后的跨域问题

    起因 在vue文件打包后,项目脱离了vue配置的反向代理配置,还是会报跨域的错误,或者直接打不开本地文件, 但是此刻我们想打开打包后的文件,测试一下文件有没有错误,因为经常会存在开发阶段没有问题,打包 ...

  2. Vue打包上线部署

    一.路径问题 1.脚手架+webpack打包通过npm run build,但是后台tomcat部署上线的时候,会衍生出一些问题,比如,路径问题(因为在项目中,我们使用了绝对路径,这里必须要使用相对路 ...

  3. VUE打包发布后无法访问js、css资源

    在vue开发中,本地测试以及测试环境中都没有遇到问题,当发布生产,有虚拟路径时,便出现js.css均报错404: 首先在config的index.js文件中,将assetsPublicPath修改为' ...

  4. 关于vue打包上线遇到的坑

    打包上线经常会经常遇到路径找不到,页面空白,那么下面我们就解决一下. 第一步.先找到config目录的index.js 改成如上图红框标注所示 第二步.找到build下的utils.js文件 加上如上 ...

  5. vue打包项目后使用-webkit-line-clamp: 2;这个属性不生效?

    在项目中要实现多行省略,-webkit-line-clamp: 2;打包后不生效,使用下面的方法: word-break: break-all; text-overflow: ellipsis; di ...

  6. -webkit-line-clamp、-webkit-box-orient vue 打包部署后不起作用??

    场景分析:实际开发中,文字描述过长,需要两行或三行显示缩略显示: 实现过程: 实现过程遇到的问题:打包到线上后发现并没有-webkit-box-orient属性,导致省略号并没有按预期展示: 解决方法 ...

  7. VUE打包上线优化

    1.将vue vue-router vuex 尽量使用CDN externals: { 'vue':'Vue', 'vue-router':'VueRouter', 'vuex':'Vuex', 'a ...

  8. Vue打包上线之后CSS没有压缩和不生效

    前言 当用vue-cli 脚手架 打包压缩时,发现打包出来的css 没有被压缩, 所以查阅了些资料,下面用这个方法解决: 1.首先注释掉webpack.prod.conf.js中下面的代码 new O ...

  9. Vue项目上线后刷新报错404问题(apache,nginx,tomcat)

    转自:https://www.cnblogs.com/sxshaolong/p/10219527.html 很简单,需要 服务器端 加个配置文件,然后 重启服务就好了,记住一定要 重启服务,否则无效!

随机推荐

  1. javaweb阶段几个必会面试题

    1.jsp的9大隐式对象 response(page):response对象是javax.servlet.http.HttpServletResponse对象的一个实例.就像服务器创建request对 ...

  2. progress组件(进度条)

    progress组件:进度条 progress组件的属性: percent:类型:number 设置百分比 (0~100) show-info:类型:布尔 在进度条右侧显示百分比 border-rad ...

  3. svn 服务器操作

    mkdir /var/svn/svnrepos/aaasvnadmin create /var/svn/svnrepos/aaasvnserve -d -r /var/svn/svnrepos #启动 ...

  4. Linux内核调试方法总结之coredump

    什么是core dump? 分析core dump是Linux应用程序调试的一种有效方式,像内核调试抓取ram dump一样,core dump主要是获取应用程序崩溃时的现场信息,如程序运行时的内存. ...

  5. fedora bash shell 为什么不能使用ctrl+c了?

    无法使用ctrl+c? 原来是因为, 在shell中, 为了选择和复制粘贴文字内容的方便, 对shell的快捷键进行了设置, 将复制设置为 ctrl+c了, 将zhantie设置为ctrl+v了 所以 ...

  6. JS text节点无innerHTML

    在线预览 text节点无innerHTML这个属性!!! 如果直接修改text节点的属性(data,nodeValue,textContent),或者使用js原生的修改text节点的内容的方法都会将H ...

  7. springmvc 读写分离

    推荐第四种:https://github.com/shawntime/shawn-rwdb 4种不方的读写分离实现方法 http://blog.csdn.net/lixiucheng005/artic ...

  8. windows10下安装docker报错:error during connect

    详细报错信息如下: C:\Users\zig>docker info error during connect: Get http://%2F%2F.%2Fpipe%2Fdocker_engin ...

  9. 博客图片上传picgo工具安装配置github图传使用

    摘要 对于每一个写博客的人来说,图片是至关重要.这一路经历了多次图片的烦恼,之前选择了微博个人文章那里粘贴图片的方式上传,感觉也挺方便的.但是由于新浪的图片显示问题,如果header中不设置 标签就不 ...

  10. delphi 函数isiconic 函数 判断窗口是否最小化

    http://blog.sina.com.cn/s/blog_66357ab901012t2h.html delphi 函数isiconic 函数 判断窗口是否最小化 (2012-05-26 22:0 ...