feat: 加入css样式自适应

package.json

@@ -39,6 +39,8 @@
     "husky": "^4.3.0",
     "less": "^3.0.4",
     "less-loader": "^4.1.0",
+    "postcss-px-to-viewport": "^1.1.1",
+    "postcss-pxtorem": "^5.1.1",
     "vue-template-compiler": "^2.5.21"
   },
   "eslintConfig": {

vue.config.js

@@ -38,5 +38,39 @@ module.exports = {
     //         chunkFilename: `css/[name].[hash:6].css`
     //     })
     // ]
+  },
+  css: {
+    // loaderOptions: {
+    //   postcss: {
+    //     plugins: [
+    //       require('postcss-pxtorem')({
+    //           // TODO：这个值该怎么算
+    //         rootValue: 32, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
+    //         selectorBlackList: ['van'], // 忽略转换正则匹配项
+    //         propList: ['*'],  //要转换的匹配项
+    //       })
+    //     ]
+    //   }
+    // }
+    loaderOptions: {
+      postcss: {
+          plugins: [
+              require("postcss-px-to-viewport")({
+                unitToConvert: "px", // 把什么单位转换成vw
+                viewportWidth: 1000, // 视口宽度，设计稿宽度
+                viewportHeight: 600, // 视口高度，设计稿高度
+                unitPrecision: 5, // 转换成vw单位的小数点后的保留位数
+                propList: ["*"], // 属性列表，表示你要把哪些css属性的px转换成vw
+                viewportUnit: "vw", // 使用的单位，目前可选单位有vw,vh。
+                fontViewportUnit: "vw", // 字体使用的单位
+                selectorBlackList: ['van', 'el-'], // 匹配不被转换为vw的选择器
+                minPixelValue: 1,
+                mediaQuery: false,
+                replace: true, // 是否直接更换属性值，而不添加备用属性
+                exclude: /(\/|\\)(node_modules)(\/|\\)/,
+              })
+          ]
+      }
+    }
   }
 }