vite+vue3+autoprefixer 构建自动处理兼容css

效果

第一步-安装

yarn add autoprefixer -D
//npm add autoprefixer-D

第二步

方式一

vite.config.js 

import autoprefixer from 'autoprefixer'
export default defineConfig(({ mode, command }) => {
    return {
          css: {
            postcss: {
                // 关键代码
                plugins: [
                    autoprefixer({
                        // 自动添加前缀
                        overrideBrowserslist: [
                            'Android 4.1',
                            'iOS 7.1',
                            'Chrome > 31',
                            'ff > 31',
                            'ie >= 8',
                            //'last 2 versions', // 所有主流浏览器最近2个版本
                        ],
                        grid: true,
                    }),
                ],
            },
        },

    }
})

方式二

创建 postcss.config.js
module.exports = {
    plugins: {
        // 兼容浏览器，添加前缀
        autoprefixer: {
            overrideBrowserslist: [
                // 'Android 4.1',
                // 'iOS 7.1',
                'Chrome > 31',
                'ff > 31',
                'ie >= 8',
                //'last 10 versions', // 所有主流浏览器最近2个版本
            ],
            grid: true,
        },
    },
}

https://github.com/postcss/autoprefixer