vue-cli3项目使用vw实现移动端适配

1. 安装依赖

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 -D
npm i postcss-import postcss-url autoprefixer -D

2. 新建.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, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750 
        viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置 
        unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除） 
        viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw 
        selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 
        minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值 
        mediaQuery: false // 允许在媒体查询中转换`px` 
      }, 
      "postcss-viewport-units":{},
      "cssnano": {
        preset: "advanced",
        autoprefixer: false,
        "postcss-zindex": false
      },
  }
}

3. 移除package.json中多余的plugin

   
   image.png

// 我的package.json文件:
{
  "name": "vue-cli3-h5-init",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "cssnano": "^4.1.10",
    "postcss-aspect-ratio-mini": "^1.0.1",
    "postcss-cssnext": "^3.1.0",
    "postcss-px-to-viewport": "^1.1.1",
    "postcss-viewport-units": "^0.1.6",
    "postcss-write-svg": "^3.0.1",
    "style-resources-loader": "^1.2.1",
    "vue": "^2.6.10",
    "vue-cli-plugin-style-resources-loader": "^0.1.3",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.12.0",
    "@vue/cli-plugin-eslint": "^3.12.0",
    "@vue/cli-service": "^3.12.0",
    "autoprefixer": "^9.6.5",
    "babel-eslint": "^10.0.1",
    "cssnano-preset-advanced": "^4.0.7",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "postcss-import": "^12.0.1",
    "postcss-url": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  }
}

4. npm run serve

注意：引入的全局minxin.less中的变量修改后需要重新npm run serve

注意: 处理图片不显示, 在App.vue里面添加css
img { content: normal !important; }

github项目地址：https://github.com/SmaVivian/vue-cli3-h5-init.git

参考：
https://gitee.com/wswww/vue3.x_vw_layout
https://www.jianshu.com/p/1f1b23f8348f