请问你是不是使用了 《如何在Vue项目中使用vw实现移动端适配》 ，我使用了这个出现了这个问题，然后一排查，是 .postcssrc.js 里的 cssnano 导致的！原因是因为 animation-name 被 cssnano 重写了

然后我这样子处理解决了：

.postcssrc.js

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": { utf8: false },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750 / 2, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334 / 2, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // 允许在媒体查询中转换`px`
    },
    "postcss-viewport-units": {
      // vw适配中使用伪类选择器遇到的问题 https://blog.csdn.net/perryliu6/article/details/80965734
      filterRule: rule => rule.selector.indexOf('::after') === -1 && rule.selector.indexOf('::before') === -1 && rule.selector.indexOf(':after') === -1 && rule.selector.indexOf(':before') === -1
    },
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false,
      // 解决了 animation-name 被重写的 bug  https://github.com/cssnano/cssnano/issues/247
      reduceIdents: false
    }
  }
}

请问你是不是使用了 《如何在Vue项目中使用vw实现移动端适配》 ，我使用了这个出现了这个问题，然后一排查，是 .postcssrc.js 里的 cssnano 导致的！原因是因为 animation-name 被 cssnano 重写了

然后我这样子处理解决了：

.postcssrc.js

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": { utf8: false },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750 / 2, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334 / 2, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // 允许在媒体查询中转换`px`
    },
    "postcss-viewport-units": {
      // vw适配中使用伪类选择器遇到的问题 https://blog.csdn.net/perryliu6/article/details/80965734
      filterRule: rule => rule.selector.indexOf('::after') === -1 && rule.selector.indexOf('::before') === -1 && rule.selector.indexOf(':after') === -1 && rule.selector.indexOf(':before') === -1
    },
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false,
      // 解决了 animation-name 被重写的 bug  https://github.com/cssnano/cssnano/issues/247
      reduceIdents: false
    }
  }
}

多谢，试了下确实是这个原因。

加了还是一样有这个问题，不起效果