当前位置：首页 > news >正文

一个帮助写autoprefixer配置的网站

news 2025/6/26 2:14:58

前端需要用到postcss的工具，用到一个插件叫autoprefixer，这个插件能够给css属性加上前缀，进行一些兼容的工作。

如何安装之类的问题在csdn上搜一下都能找到（注意，vite是包含postcss的，不用在项目中安装postcss，苦笑），我看了一下，官方是建议在package.json之中进行配置的。

postcss我个人是在vite.config.js当中配置的，具体兼容哪些浏览器是在package.json只中配置的（我感觉这也算项目配置的一部分）。如下：

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import autoprefixer from 'autoprefixer'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],css: {postcss: {plugins: [autoprefixer({// 这边显示最好的方式还是在package.json中进行限制grid: true})]}}
})

package.json:

{"name": "postcss-test","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"vue": "^3.2.47"},"devDependencies": {"@vitejs/plugin-vue": "^4.1.0","autoprefixer": "^10.4.14","vite": "^4.3.9"},"browserslist": ["cover 98% in CN","not dead","ie >= 8"]
}

可以注意到最后的browserslist字段，其中就是我对兼容的浏览器的配置，表示覆盖98%的active浏览器，同时兼容ie8往上的版本（只是自己的写法，不是最佳实践）

写了那么多废话，到了重点，这个配置究竟怎么写呢，我怎么知道我写的配置所覆盖的浏览器类型呢，这里要借助两个网站，一个是GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env - GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-envhttps://github.com/browserslist/browserslist#best-practices

官网提供的最佳实践页面，就是教你写这个配置的。

配置产生的效果可以在这个网站上观看效果：BrowserslistDisplay target browsers from a Browserslist confighttps://browsersl.ist/#q=last+8+versions%2C+not+dead%2C+%3E+0.2%25®ion=CN

比如，我看到同样的一篇关于 autoprefixer的文章上的配置是这样写的：

autoprefixer({. // 自动添加前缀overrideBrowserslist: ["Android 4.1","iOS 7.1","Chrome > 31","ff > 31","ie >= 8"//'last 2 versions', // 所有主流浏览器最近2个版本],grid: true})

这里部分截取了他的配置（明显限定了安卓和ios的版本），我们在上面的网站上看看，能兼容多少浏览器