使用postcss-px2rem适配已经做成功1920*1080适配为rem

要使postcss-px2rem生效，您需要确保已经在项目中安装了postcss-loader和postcss-px2rem。然后，您需要在webpack.config.js中配置它们。以下是修改后的示例：

1. 首先，确保已经安装了postcss-loader：

InsertCopy

npm install postcss-loader --save-dev

1. 然后，在webpack.config.js中配置postcss-loader：

InsertCopy

const path = require('path');

module.exports = {
 // ...
 module: {
   rules: [
     // ...
     {
       test: /\.css$/,
       use: [
         'vue-style-loader',
         'css-loader',
         'postcss-loader' // 添加此行
       ]
     },
     // ...
   ]
 },
 // ...
};

1. 接下来，确保已经安装了postcss-px2rem：

InsertCopy

npm install postcss-px2rem --save-dev

1. 在postcss.config.js中配置postcss-px2rem：

InsertCopy

module.exports = {
 plugins: {
   autoprefixer: {},
   'postcss-px2rem': {
     remUnit: 16, // 设置rem单位为16
     viewBox: false, // 关闭viewBox
     selectorBlackList: ['.ignore', '.hairlines'] // 排除特定选择器
   }
 }
};

1. 确保在vue.config.js中配置了css.loaderOptions：

InsertCopy

module.exports = {
 css: {
   loaderOptions: {
     postcss: {
       plugins: [
         // ...
         require('postcss-px2rem')({
           remUnit: 16,
           viewBox: false,
           selectorBlackList: ['.ignore', '.hairlines']
         })
         // ...
       ]
     }
   }
 }
};

现在，postcss-px2rem应该已经生效了。

如果您已经按照上述步骤配置了postcss-px2rem，但仍然没有看到效果，那么可能是因为以下原因：

1. 确保您的postcss.config.js文件位于项目的根目录下。
2. 确保您的webpack.config.js文件也位于项目的根目录下。
3. 确保您的vue.config.js文件也位于项目的根目录下。
4. 确保您的package.json文件中包含了postcss-loader和postcss-px2rem的依赖。
5. 清除浏览器缓存，以便新的配置生效。

如果问题仍然存在，请检查控制台输出中是否有关于postcss-px2rem的错误信息。