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

下面是关于“vue-cli2打包前和打包后的css前缀不一致的问题解决”的完整攻略。

问题描述

在使用 vue-cli2 构建的项目中，有时会出现打包之前和打包之后的 css 样式前缀不一致的情况，导致页面样式出现异常。这可能是由于不同的 css 预处理器或 postcss 插件在处理 css 时所添加的前缀不同造成的。

解决方法

方法一：手动添加前缀

在 css 样式中手动添加浏览器前缀是一种可行的解决方法，但是比较麻烦且容易出错，不推荐使用。

示例：

/* 样式中手动添加浏览器前缀 */
.box {
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2);
  box-shadow: 0 0 10px rgba(0,0,0,.2);
}

方法二：postcss自动添加前缀

使用 postcss 插件自动添加浏览器前缀是一个更加高效且推荐的方法。下面是具体步骤：

第一步：安装依赖

使用 npm 安装 autoprefixer 和 postcss-loader 两个依赖包：

npm install autoprefixer postcss-loader --save-dev

第二步：配置 webpack

在项目中寻找 webpack 配置文件 webpack.config.js，并在 module.rules 数组的末尾添加如下代码：

{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader',
    'postcss-loader'
  ]
}

第三步：添加 postcss 配置文件

在项目根目录中添加 postcss 配置文件 .postcssrc.js，并在其中添加 autoprefixer 插件配置：

module.exports = {
  plugins: [
    require('autoprefixer')({
      // 指定需要添加前缀的浏览器版本
      browsers: ['last 2 versions']
    })
  ]
}

第四步：测试代码

重新运行打包命令，对比打包前后的样式前缀是否一致，如果一致则问题解决。

示例：

/* 样式文件 style.css */
.box {
  box-shadow: 0 0 10px rgba(0,0,0,.2);
}

/* 打包后的 style.css */
.box {
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2);
  box-shadow: 0 0 10px rgba(0,0,0,.2);
}

总结

以上就是针对 vue-cli2 打包前和打包后的 css 前缀不一致的解决方案。自动添加前缀的方法可以提高效率且避免手动失误带来的麻烦。如果出现样式异常问题，不妨先尝试寻找前缀不一致的原因，再采取相应的解决方案。