本文共 1418 字，大约阅读时间需要 4 分钟。

当在Vite项目中使用PostCSS和Autoprefixer时，可能会遇到如下警告：

Replace Autoprefixer browsers option to Browserslist config. Use browserslist

此警告提示我们应将Autoprefixer的browsers选项替换为Browserslist配置。以下是解决方案的三种方法：

方法一：PosSsCConfig.js 文件

在PosSsCConfig.js中，可以通过插件配置的方式解决问题。示例配置如下：

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ],
      // 可选项：添加最新10个主流浏览器版本
      'last 10 versions'
    }
  }
}

也可以将配置方式简化为：

module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ],
      grid: true
    })
  ]
}

方法二：PosSsCConfig.js 文件（简化版）

只需在PosSsCConfig.js中引入Autoprefixer插件即可：

module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}

方法三：package.json 文件

将Browserslist配置添加到package.json中。示例配置如下：

{
  "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]
}

此外，确保PosSsCConfig.js文件中插件的配置方式如下：

module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}

方法四：根目录新建.browserslistrc 文件

在项目根目录下创建.browserslistrc文件，将所需浏览器版本列表添加至文件中。示例内容如下：

Android 4.1,
iOS 7.1,
Chrome > 31,
ff > 31,
ie >= 8
// 可选：添加最新10个主流浏览器版本
// last 10 versions

通过以上四种方法，可以有效解决Autoprefixer的浏览器兼容性警告问题。选择最适合项目需求的方式即可。

转载地址：http://ojqfk.baihongyu.com/