vue-cli2打包前和打包后的css前缀不一致的问题解决

这篇文章主要了vue-cli2项目中遇到的打包前和打包后CSS前缀不一致的问题。长沙网络推广团队对此进行了深入研究，并为大家提供了详细的解决方案。接下来，让我们一起跟随长沙网络推广的步伐，深入这个问题。

在开发过程中，基于vue-cli2使用webpack进行配置时，可能会遇到一些挑战。但掌握webpack的基本套路、了解开发环境和生产环境的概念，以及根据不同的环境进行不同的webpack配置，将使你受益匪浅。在此过程中，你可能会遇到一些棘手的问题，其中之一就是项目打包前后的CSS前缀不一致。

当我们在开发过程中，发现打包前后的CSS前缀不一致时，可能会感到非常困惑。为了解决这个问题，我们需要对vue-cli的配置进行深入分析。通过对比开发环境和生产环境的webpack配置，我们发现影响CSS前缀的主要是处理CSS的插件。经过仔细排查，问题锁定在了OptimizeCSSPlugin插件上。

当我们注释掉OptimizeCSSPlugin插件，并重新进行打包测试时，发现开发环境和生产环境的CSS前缀一致了。这说明，正是这个插件导致了打包前后CSS前缀的不一致。

那么，为什么会出现这种情况呢？原因在于，OptimizeCSSPlugin插件在处理CSS时，可能会更改原有的CSS前缀。这种更改在生产环境下可能导致了打包前后的不一致。为了解决这个问题，我们可以考虑调整或替换这个插件的配置，或者寻找其他处理方式，以确保打包前后的CSS前缀保持一致。

通过深入分析vue-cli的配置和排查问题，我们找到了导致打包前后CSS前缀不一致的原因。解决这个问题需要我们关注处理CSS的插件配置，确保其在不同环境下的行为一致。长沙网络推广团队的建议和解决方案为我们提供了一个很好的参考，希望能够帮助到更多的开发者在遇到类似问题时能够迅速找到解决方案。与优化CSS代码：处理前缀冲突的实战经历

当我们打开npm官网，寻找某个优化压缩CSS代码的插件时，可能会遇到文档说明不够详尽的情况。但在这其中，有一句话引起了我们的注意：这个插件依赖了cssnano。

cssnano是一个用于优化处理CSS格式、前缀等的插件。在它的配置参数中，有一个名为aurefixer的选项。为了深入了解这个选项的作用，我们需要跳转到cssnano的官网（这个过程可能需要一些技巧）。

aurefixer的主要功能是根据browsers选项删除不必要的前缀。在默认情况下，它不会向CSS文件添加新的前缀。这就为我们问题提供了线索：原来，这个插件的aurefixer（默认设置可能是为true）会删除它认为不必要的前缀，而postcss的aurefixer则是为我们设定的浏览器范围添加前缀。这就产生了冲突。

为了解决这个问题，我们在github上找到了解决方案。我们需要在build/webpack.prod.conf.js文件中，为OptimizeCSSPlugin插件的cssProcessorOptions属性加上aurefixer: false来禁用它，以避免冲突。

具体来看，代码应该是这样的：

```javascript

new OptimizeCSSPlugin({

cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: false, aurefixer: false } : { safe: true, aurefixer: false }

}),

```

通过以上的设置，我们可以解决这个冲突问题。查看我们开发和构建出来的CSS前缀，应该就会保持一致了。

这个问题的根源在于OptimizeCSSPlugin依赖了cssnano，而cssnano中的aurefixer配置参数会删除不必要的前缀（可能会误删在某些浏览器必要的前缀）。这与postcss的aurefixer功能产生了冲突，所以我们选择禁用它。

现在，我们打包出来的CSS文件与我们所设定的浏览器范围对应的前缀保持一致。虽然整篇文章可能有些啰嗦，但这是我解决这个问题过程中的真实记录。如果有分析不对的地方，欢迎指出，谢谢！

以上就是我们今天的全部内容，希望能够对大家的学习有所帮助。同时也希望大家能够支持我们的狼蚁SEO。让我们共同和优化CSS的世界，创造更美好的网络体验。