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

在使用vue-cli2打包项目的过程中，出现样式前缀不一致的问题，这是因为在开发过程中我们使用的vue-cli2自带的webpack配置，与我们在实际部署上线时使用的配置存在差异。

解决方法是在webpack配置文件中添加自动添加样式前缀的插件autoprefixer，这个插件可以根据配置项自动为 css 属性添加拥有性前缀，从而使得样式在不同浏览器上兼容性更好。

下面是具体的操作步骤：

1. 安装依赖

首先，在命令行中进入项目根目录，并执行以下命令来安装autoprefixer插件：

npm install --save-dev autoprefixer

2. 配置webpack

找到项目的build目录下的webpack.base.conf.js文件，找到代码中的module部分，添加一项postcss配置，代码如下：

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            plugins: () => [
              require('autoprefixer')
            ]
          }
        }
      ]
    }
  ]
}

在这段代码中，我们使用postcss-loader加载器来引入autoprefixer插件，并在plugins选项中配置它。

3. 配置Autoprefixer

在项目根目录下创建一个新的文件.browserslistrc，在其中填写需要支持的浏览器版本的列表，示例如下：

chrome >= 58
Firefox >= 52
Safari >= 9
ios >= 9
Android >= 4.4

其中，browserslist是一个官方推荐的浏览器版本列表。我们在这个文件中填写所需要支持的浏览器版本即可。

示例

示例1

下面是一个简单的示例，在样式表中，我们希望设置一个渐变背景。代码如下：

.gradient {
  background: linear-gradient(to right, #f00, #0f0);
}

在未添加autoprefixer插件时，在打包后的应用中，这段样式的前缀会变成：

.gradient {
  background: -webkit-linear-gradient(to right, #f00, #0f0);
  background: linear-gradient(to right, #f00, #0f0);
}

而在添加了插件后，打包后的样式前缀将会是我们配置的.browserslistrc中指定的浏览器版本所支持的格式。这里以chrome浏览器为例，打包后的样式将会是：

.gradient {
  background: -webkit-gradient(linear, left top, right top, from(#f00), to(#0f0));
  background: linear-gradient(to right, #f00, #0f0);
}

可以看到，在添加autoprefixer插件后，生成的样式能够兼容更多的浏览器。

示例2

在使用第三方组件库时，有时候这些组件库的样式只适用于某些特定的浏览器版本，这时候我们希望在打包时能够针对这些特定的浏览器加上前缀。

比如说在使用element-ui组件库时，我们希望针对ie10浏览器加上前缀。那么我们只需要在.browserslistrc文件中添加ie10浏览器的配置，示例如下：

chrome >= 58
Firefox >= 52
Safari >= 9
ios >= 9
Android >= 4.4
ie >= 10

这样，在打包时，element-ui中针对ie10浏览器的样式就会带有前缀。