关于在Vue3项目中配置vw实现移动端适配，rem配置不成功的小伙伴不妨看看这篇文章

一，配置vw

在配置vw之前，我们先配置vue-cli3的搭建，安装步骤在我主页文章中，这里先不展示安装过程：链接 ↓↓↓
关于vue脚手架vue-cli搭建安装流程（内附图文）

二，创建项目

利用可视化视图的方式打开vue ui界面创建项目（这里我先创建好了）

用编译器打开刚创建的veu-applet中 下面是我的一个配置 ↓↓↓:

在vue-cli3中是没有.postcssrc.js的，需要自己创建。（我这里的vue.config.js文件是版本自动创建的）
创建完成文件后我们先安装插件

 //一步一步安装
 npm install postcss-import //转换CSS的工具
 npm install postcss-url
 npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S   
 npm i cssnano-preset-advanced --save-dev

安装完成后在package.json中查看是否安装成功 ↓↓↓

好！ 我们打开刚创建的 .postcssrc.js 文件完成配置

module.exports = {
  plugins: {
    "postcss-import": {},
    autoprefixer: {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
      utf8: false
    },
    'postcss-px-to-viewport': {
      unitToConvert: "px",
      viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 812, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      fontViewportUnit: "vw",
      selectorBlackList: ['.ig-'],  // 
 指定不转换为视窗单位的类，在该类型名下写不会转换为vw，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false, // 允许在媒体查询中转换`px`
      replace: true,
      exclude: /(\/|\\)(node_modules)(\/|\\)/
    },
    'postcss-viewport-units': {
      filterRule: rule => rule.selector.includes('::after') && rule.selector.includes('::before')
    },
    "cssnano": {
      "cssnano-preset-advanced": {
        zindex: false,
        autoprefixer: false
      },
    }
  }
}

三，最后一步就是vw兼容

使用viewport的polyfill
我们打开 public 文件夹中的 index.html 文件中 ↓↓↓

引入下面的代码

我们来试验一下

成功！！！
END