vue中使用vw适配移动端

1.首先在项目中安装依赖

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": { utf8: false },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750, // 容器宽度，也可以看作设计图的宽度
      viewportHeight: 1334, // 容器高度，可以不配置
      unitPrecision: 3, // px转换为vw后保留的小数位
      viewportUnit: 'vw', // px需要转换成的单位，使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 不需要转换为其他单位的的class类
      minPixelValue: 1, // 小于等于1px不转换
      mediaQuery: false // 是否允许在媒体查询中使用px
    },
    "postcss-viewport-units": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
}

因为在cssnano中配置了 preset:"advanced",所以需要添加一个依赖

img {
    content: normal !important;
}

4.解决vw兼容问题

在html中引用viewport-units-buggyfill插件

<script>
    window.onload = function () {
      window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks });
    } 
>