一个帮助写autoprefixer配置的网站

最新推荐文章于 2025-11-15 02:03:49 发布

原创

最新推荐文章于 2025-11-15 02:03:49 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #postcss

文章介绍了如何在Vite项目中配置autoprefixer插件来自动添加CSS属性前缀，以实现浏览器兼容性。配置主要在vite.config.js和package.json的browserslist字段中完成。作者提到，通过browserslist官网和在线工具可以检查兼容性范围，并讨论了平衡兼容性和文件大小的考量。

前端需要用到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"
  },
  "devDepende