vue@cli4 和 webpack5【实现自适应px-rem转化】

1: 项目目录结构：

2 ：项目简单介绍

     如上图可看出：该项目是由 vue@cli4 构建的，使用 webpack5 来打包的，

3： 想要实现 本地编译时 和 上线后，适配所有pc 端

    步骤1： 安装2个插件：

autoprefixer : 它可以解析CSS文件并且添加浏览器前缀到CSS内容里和

postcss-pxtorem: 将px 转化为 rem

amfe-flexible：是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。

npm install --save autoprefixer postcss-pxtorem amfe-flexible

步骤2：在vue.config.js文件中进行配置

// autoprefixer: 为html、body添加font-size，窗口调整时候重新设置font-size
const autoprefixer = require('autoprefixer');

// 引入等比适配插件
const px2rem = require('postcss-pxtorem');

// // 配置基本大小
const postcss = px2rem({
  rootValue: 192, // 设计稿的除以10得到适配范围,一般为192,设计稿为1920,最终页⾯会换算成 10rem,1rem=192px
  unitPrecision: 5, // 保留rem⼩数点多少位。
  propList: ['*'], // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
  exclude: /node_modules/, // 要忽略并保留为 px 的文件路径，正则表达式或者函数都可以传。
  selectorBlackList: ['.el'],  //则是⼀个对css选择器进⾏过滤的数组，⽐如你设置为['fs']，那例如fs-xl类名，⾥⾯有关px的样式将不被转换，这⾥也⽀持正则写法。
  // replace: true, //（布尔值）替换包含REM的规则，而不是添加回退
  // mediaQuery: false, //媒体查询( @media screen 之类的)中不⽣效
  // minPixelValue: 12, //px⼩于12的不会被转换,默认 0
})

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
  publicPath:'/',
  css: {
		loaderOptions: {
			postcss: {
        postcssOptions: {
          plugins: [autoprefixer(), postcss]
        }
			}
		}
	},
})

     步骤3：在main.js中引入amfe-flexible

  

    步骤4： 在根目录public/index.html头部加入手机端自适应meta

 
   
    "postcss-loader": "^3.0.0",
 
   
    "postcss-preset-env": "^7.6.0",
 
   
    "px2rem-loader": "^0.1.9",
 
   
  
npm install --save postcss postcss-loader postcss-preset-env px2rem-loader
 
  
步骤2：配置webpac.base.config.js
 
  
      {
        test: /\.css|less$/,
        use : [
          MiniCssExtractPlugin.loader,
          // {loader:'style-loader'},
          {loader:'css-loader'},
          {// 兼容css, autoprefixer为css3属性添加前缀，-webkt-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;
            // postcss-loader postcss-preset-env：，不写任何值，默认兼容所有浏览器
            loader:"postcss-loader",
            options:{
                postcssOptions:{
                    ident: "postcss",
                    plugins:[
                      // require('autoprefixer')
                      require("postcss-preset-env")()
                    ]
                }
            }
          },
          {
            loader: 'px2rem-loader',
            options: {
              remUnit: 192, // 1rem = 192px
              remPrecision: 8 // px 转换为 rem 时小数点后的位数
            }
          },
          {loader:'less-loader'},
          // {loader:'postcss-loader'}
        ]
      },
      {
        test: /\.styl(us)?$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader'],
      },
 
  
步骤3：在根目录public/index.html 中加入，根据窗口的大小给html设置等比的字体大小【 配置可伸缩布局方案】
 
  
方式1： 直接引入
 
  
       1、直接引入
 
  
 
  
        2： 在public/index.html中引入
 
  
    
 
  
方式2： 直接用script标签写入