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); 
}

再次打包上線，漸變屬性恢復了。開心~~~