Vue2适配方案：postcss-px-to-viewport

---

一、适配方案

• 由于最近整的项目都是钉钉或者企业微信这类的三方平台为容器的第三方应用，这就导致了不管是pc端还是移动端都需要做适配，本来是想使用rem方案，但是我怎么能容忍px之外的计量单位呢，所以就有了以下方案：
• vue2项目结合postcss-px-to-viewport适配

---

二、配置

• 版本很重要，因为这些版本问题，出现了很多很多的问题
• 当前项目基本环境：

node:v16.14.2
npm:6.14.17

"vue": "2.6.10",
"vue-template-compiler": "2.6.10",
"less": "^3.0.4",
"less-loader": "^5.0.0",

• 安装依赖：

npm i postcss@8.4.12  postcss-import@11.0.0  postcss-loader@4.0.4 postcss-px-to-viewport@0.0.3 -D

• 配置：postcss.config.js

module.exports = {
  plugins: {
    "postcss-import": {},
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: {
      path: ["./src/*"],
    },
    "postcss-px-to-viewport": {
      viewportWidth: "1920", // 视窗的宽度，对应设计稿的宽度
      // viewportHeight: "1080", // 视窗的高度
      unitPrecision: 5, // 指定px转换为视窗单位值的小数位数(因为无法整除)
      viewportUnit: "vw", // 指定需要转换成的视窗单位，使用vw
      selectorBlackList: [], // 指定不转换为视窗单位的类
      minPixelValue: 1, // 小于或等于1px不转换为视窗单位
      mediaQuery: false, // 允许在媒体查询中转换px
      exclude: /(\/|\\)(node_modules)(\/|\\)/, // 不包含node_modules文件
    },
  },
}

• 这样就可以将css中的px以及第三方库中的px单位全部转换成vw，如果要对哪些类不进行转换就在selectorBlackList填写类名就可以了

---