详解Vue-cli3.X使用px2rem遇到的问题

什么是vue-cli3.X

Vue CLI 是一个基于Vue.js进行快速开发的完整系统。它包括一个响应式的开发服务器、可定制的webpack配置、常规的Vue项目构建任务和集成了最佳实践的生产环境构建等。

何为px2rem

px2rem 是一种将px值转化为rem值的工具。通过将框架内各个元素的单位从px转化为rem，可以让页面按比例缩放，适应不同尺寸的屏幕。

问题描述

在使用 vue-cli3.X 进行移动端开发时，我们常常会使用 px2rem 将页面中的单位替换为 rem，以便页面自适应。但是，在使用 px2rem 时，可能会遇到以下两个问题：

• 问题一：将 px 转为 rem 时，会有一些误差。比如应该是 1rem，但实际上转换后可能变成了 0.999rem 等。

• 问题二：在使用 vuex 进行状态管理时，如果将各个元素的单位从 px 转换成 rem，可能会影响到 vuex 中的数据显示。因为vuex中的数据是以px为单位，将单位转换成rem后会导致数据显示错误。

解决方案

对于问题一，我们可以使用 postcss-px2rem-exclude 插件进行精确转换。

具体步骤如下：

1. 安装插件

npm install postcss-px2rem-exclude --save-dev

1. 在 postcss.config.js 中配置插件

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px2rem-exclude': {
      remUnit: 75,  // 根据设计稿调整
      exclude: /node_modules|folder_name/i    //指定需要忽略的文件夹
    }
  }
}

1. 在需要转换的样式文件中引入以下语句

/* 在需要转换的 css 文件中 */
@import '~postcss-px2rem-exclude/lib/plugin.js';
html {
  font-size: 14px;    // 调整基准字体大小
}

对于问题二，我们需要在 vuex 中将 px 转换成 rem 单位。

具体步骤如下：

1. 在 store 中添加如下代码

const actions = {
  changeFontSize({commit, state}, payload) {
    let value = payload.value / (750 / (state.windowWidth / 100)) + 'rem'
    // 750为设计稿宽度，100为换算基准
    commit('SET_FONT_SIZE', { value });
  }
};

1. 在对应的组件中使用

import { mapActions } from 'vuex';
export default {
  methods: {
    ...mapActions(['changeFontSize']),
    handleChangeFontSize(value) {
      this.changeFontSize({ value });
    }
  }
};

示例说明

示例一：假设设计稿中某个图片的尺寸是 200px * 200px，在使用 px2rem 进行转换时，可能会发现实际尺寸有所偏差，比如实际变成了 199px * 199px。

此时，可通过使用 postcss-px2rem-exclude 插件进行精确转换，将像素转换为元单位，以避免误差。

示例二：在使用 vuex 进行状态管理时，我们可能会将某个元素的单位从 px 转换成 rem，以适应不同的设备。但是，如果直接将 vuex 中的数据也转换成 rem，可能会导致数据显示错误。

解决方案是，在 vuex 中将 px 转换成 rem 单位，以便数据显示正确。