vue中使用postcss-px2rem的两种方法

当我们在Vue项目中使用PostCSS-px2rem时，我们可以采用以下两种方法：

方法一：vue-cli-plugin-px2rem-auto

vue-cli-plugin-px2rem-auto是一个Vue CLI插件，可以帮助我们轻松地将px转换为rem，并支持vw、vh等单位。

步骤如下：

1. 安装插件

npm install vue-cli-plugin-px2rem-auto --save-dev

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

module.exports = {
  // ...
  css: {
    loaderOptions: {
      px2rem: {
        remUnit: 75
      }
    }
  },
  // ...
  pluginOptions: {
    px2rem: {
      remUnit: 75
    }
  },
  // ...
}

在这里，我们将remUnit设置为75。这意味着1rem转换为75px。您可以根据设计要求自定义remUnit。

最后，重新启动您的Vue应用程序，并确保您的设计在不同的设备和分辨率中都能正确显示。

方法二：手动配置postcss.config.js

如果您不想使用插件，并且更喜欢手动配置，请可以参考以下步骤：

1. 安装依赖

npm install postcss-px2rem --save-dev

1. 配置postcss.config.js

module.exports = {
  plugins: [
    require('postcss-px2rem')({
      remUnit: 75
    })
  ]
}

在这里，我们将remUnit设置为75。这意味着1rem转换为75px。您可以根据设计要求自定义remUnit。

与方法一类似，重新启动您的Vue应用程序，并确保您的设计在不同的设备和分辨率中都能正确显示。