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为根目录
      		}
    	},
	}	
}