vite项目使用postcss-px-to-viewport做移动端适配

项目环境

"dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "axios": "^1.4.0",
    "clipboard": "^2.0.11",
    "element-plus": "^2.3.5",
    "file-saver": "^2.0.5",
    "js-cookie": "^3.0.5",
    "mavon-editor": "3.0.1",
    "moment": "^2.29.4",
    "nprogress": "^0.2.0",
    "sass": "^1.63.3",
    "vue": "^3.3.2",
    "vue-router": "^4.2.0",
    "vuex": "^4.0.2",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "postcss-px-to-viewport-8-plugin": "^1.2.2",
    "vite": "^4.3.5",
    "vite-plugin-top-level-await": "^1.3.1"
  }

配置步骤

1. 安装postcss-px-to-viewport-8-plugin

npm install postcss-px-to-viewport-8-plugin -D

2. 配置vite.config.js

import pptv from "postcss-px-to-viewport-8-plugin";

const load_pptv = pptv({
  unitToConvert: 'px', // 要转化的单位
  viewportWidth: 750, // UI设计稿的宽度
  unitPrecision: 6, // 转换后的精度，即小数点位数
  propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
  viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
  fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
  selectorBlackList: ['wrap'], // 指定不转换为视窗单位的类名，
  minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
  mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
  replace: true, // 是否转换后直接更换属性值
  exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
  landscape: false, // 是否处理横屏情况
});

export default defineConfig({
  plugins: [
    vue(),
  ],
  css: {
    postcss: {
      plugins: [load_pptv],
    },
  },
});