vue2+postcss-px-to-viewport

1.安装依赖

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

2.在vue.config.js中进行配置

 css: {
    loaderOptions: {
      sass: {
        sassOptions: { outputStyle: "expanded" },
      },
      postcss: {
        plugins: [
          require("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文件
          }),
        ],
      },
    },
  },

然后直接运行即可，其他相关配置参数可查阅资料

3.扩展

include需要下载github上面的postcss-px-to-viewport

npm i https://github.com/evrone/postcss-px-to-viewport --save-dev

 postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            viewportWidth: 1920,
            unitPrecision: 5,
            viewportUnit: "vw",
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: false,
            // exclude: /(\/|\\)(node_modules)(\/|\\)/,
            include: [/views\/index\.vue$/] // 精确匹配 views 目录下的 index.vue 文件
          }),
        ],
      }