脚本宝典收集整理的这篇文章主要介绍了解决vue-cli build打包后CSS浏览器兼容前缀自动去除的问题，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

今天做练手项目部署的时候碰到了个奇怪问题，开发环境里显示得好好的CSS prefixer样式，到production环境就消失了。
我开发环境用的是 scss ，刚开始我还以为是 scss 处理器的问题，后来研究了下 build 脚本，发现人家把CSS统一用一个插件给压缩了，然后追查之下发现这个插件用了 postCSS 的 autoprefixer 插件。
这下问题就清楚了，因为 autoprefixer 插件会针对支持的浏览器进行CSS 前缀的删除和追加。

比如：

a {
  -webkit-border-radius: 5px;
          border-radius: 5px;
}

编译成:

a {
  border-radius: 5px;
}

autoprefixer 使用了 browserslist 作为依赖。在项目目录中运行:

npx browserslist

可以查看当前项目支持的浏览器列表，这时候只要修改当前项目支持的浏览器就可以了。
vue-cli生成的项目默认支持部分移动端浏览器和最新版本的PC端浏览器。

在 package.json 中修改 browserslist ：

"browserslist": [
  "> 1%",
  "last 2 versions",
  "last 10 Chrome versions",
  "last 5 Firefox versions",
  "Safari >= 6",
  "ie > 8"
]

之后再运行 npm run build 这时生成的代码就有 css prefix 了。

博客原文： http://www.zhuyuwei.cn/2018/v...

脚本宝典总结

以上是脚本宝典为你收集整理的解决vue-cli build打包后CSS浏览器兼容前缀自动去除的问题全部内容，希望文章能够帮你解决解决vue-cli build打包后CSS浏览器兼容前缀自动去除的问题所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。