Vue3/Vite禁用将top/bottom/left/right转为inset的CSS属性重命名

这个转换不是Vue或Vite本身触发的，是PostCSS相关插件（比如autoprefixer、cssnano）在CSS处理环节做的属性优化，导致旧浏览器兼容故障。以下是具体解决方法：

1. 禁用autoprefixer的inset转换 #

在项目根目录新建或修改postcss.config.js，配置autoprefixer关闭inset支持检测：

module.exports = {
  plugins: {
    autoprefixer: {
      supportsInsets: false // 强制保留top/right/left/bottom，不转为inset
    }
  }
}

2. 关闭cssnano的属性合并优化（生产构建场景） #

如果生产构建用了cssnano做CSS压缩，它也会自动合并属性为inset。需要在vite.config.ts里配置关闭相关选项：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    target: 'es2015',
    cssMinify: 'cssnano',
    cssMinifyOptions: {
      preset: [
        'default',
        {
          mergeLonghand: false // 关闭长属性合并，避免top/bottom等被转为inset
        }
      ]
    }
  }
})

3. 明确指定兼容的浏览器范围 #

在package.json里添加browserslist配置，让PostCSS插件自动识别需要兼容的旧浏览器，避免不必要的属性转换：

"browserslist": [
  "IE 11",
  "> 1%",
  "last 2 versions"
]

为什么字符串拼接没用？ #

不管模板里的内联样式字符串怎么拼接，最终都会经过PostCSS的统一处理，绕不开CSS优化环节，必须从配置层面入手解决。

内容的提问来源于stack exchange，提问作者me_yy