vue项目text-overflow:ellipsis;在生产环境上不显示...的问题

首先科普下文本溢出显示...的代码：

单行文本溢出：{overflow: hidden; text-overflow:ellipsis;white-space:nowrap;150px}

多行文本溢出：{overflow: hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:@line(行数)}

然后问题来了：测试环境上文本溢出正常显示...，正式环境环境则溢出隐藏，不显示...

经排查：发现是打正式包时webpack没有编译这个属性：-webkit-box-orient:vertical;

问题找到了，接下来跟踪打包，找出了optimize-css-assets-webpack-plugin这个导致问题的插件

注释掉webpack.prod.conf.js中下面的代码

new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),

问题解决了，但是css也没有压缩，并且原因也不明

于是请教度娘，找到了另一个解决办法，在-webkit-box-orient:vertical;位置添加如下代码, 关闭autoprefixer的自动删除功能即可

{/*! autoprefixer: off */
    -webkit-box-orient:vertical;
    /*! autoprefixer: on */
}

tip：如果使用的css前面不需要！,如果和我一样用了scss或less, 前面的！不能少，很多方案提供的答案前面都没有！, 导致我试过一直无效