vue 配置 postcss-px2rem

**#### postcss-px2rem

• postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件(rem 是 root em 的缩写，rem 不是相对于当前元素，而是相对于根元素，所以，不论什么位置，使用 rem 单位都是相对于根元素的 font-size)

• 安装以下插件

  npm install postcss-px2rem -D
  npm install px2rem-loader -D
  

• 在vue.config.js文件中配置

```module.exports = {

...,
chainWebpack: (config) => {
    config.module
      .rule('css')
      .test(/.css$/)
      .oneOf('vue')
      .resourceQuery(/?vue/)
      .use('px2rem')
      .loader('px2rem-loader')
      .options({
        remUnit: 16 
      })
  },
}
```

• 这样配置之后只是对css起作用，并不能对sass、scss、less等预处理语言进行处理，所以我们需要另外一个插件 postcs-plugin-px2rem

postcs-plugin-px2rem

• 安装 npm install postcss-plugin-px2rem -D

• 在vue.config.js文件中配置

  module.exports = {
  ...,
  css: {
      loaderOptions: {
        postcss: {
          postcssOptions: {
            plugins: [
              require('postcss-plugin-px2rem')({
                rootValue: 16, // 换算基数
                // unitPrecision: 5, //允许REM单位增长到的十进制数字。
                // propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
                // propBlackList: [], //黑名单
                exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
                // selectorBlackList: [], //要忽略并保留为px的选择器
                // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
                // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
                mediaQuery: false, // （布尔值）允许在媒体查询中转换px。
                minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
              })
            ]
          }
        }
      }
    },
  }
  

设置根元素font-size

• 在 src/utils 文件夹中新建文件 rem.js 根据浏览器的宽度来设置根元素的font-size

  import _ from 'lodash' // Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
  // rem等比适配配置文件
  // 基准大小
  const baseSize = 16
  // 设置 rem 函数
  export const setRem = () => {
    // 当前页面屏幕分辨率相对于 1440宽的缩放比例，可根据自己需要修改
    console.log(document.documentElement.clientWidth)
    const scale = document.documentElement.clientWidth / 1440
    // 设置页面根节点字体大小（“Math.min(scale, 3)” 指最高放大比例为3，可根据实际业务需求调整）
    document.getElementsByTagName('html')[0].style['font-size'] = `${baseSize * Math.min(scale, 1.5)}px`
  }
  
  // 创建一个 debounced（防抖动）函数
  const setDomFontSizeDebounce = _.debounce(setRem, 400)
  window.addEventListener('resize', setDomFontSizeDebounce)
  

• 在 main.js 文件中引入 setRem 方法并使用

  import { setRem } from '@/utils/rem'
  setRem()
  

@别名

• vue项目中当组件多的时候，以../的形式引入文件就会特别麻烦，所以设置alias别名的方式

moudle.exports = {
	configureWebpack: {
    	resolve: {
      		alias: {
        		'@': path.resolve('src') // 配置src为根目录
      		}
    	},
	}	
}
```**