基于Vue的PC和移动端适配的实现方案

1.package.json (vue-cli 版本 14.0.x, postcss 版本 7.x)

{
  "name": "front-project",
  "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": "^3.6.5",
    "cssnano": "^5.0.14",
    "element-ui": "^2.15.6",
    "postcss-aspect-ratio-mini": "^1.1.0",
    "postcss-cssnext": "^3.1.1",
    "postcss-px-to-viewport": "^1.1.1",
    "postcss-viewport-units": "^0.1.6",
    "postcss-write-svg": "^3.0.1",
    "vue": "^2.6.11",
    "vue-router": "^3.5.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "cssnano-preset-advanced": "^5.1.9",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "postcss": "^7.0.39",
    "postcss-import": "^12.0.1",
    "postcss-url": "^8.0.0",
    "sass": "^1.26.10",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

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,
            "minPixelValue": 1,
            "mediaQuery": false,
            "selectorBlackList": ["van", "el"],
            "landscape": true,
            "landscapeUnit": "vw",
            "landscapeWidth": 2048
        },
        "postcss-viewport-units": {filterRule: rule => rule.nodes.findIndex(i => i.prop === "content") === -1},
    }
}