关于vue3+vite完全放弃modules.export导出方式后,进行rem适配的一些注意点

第一是rem适配布局，首先安装两个插件

// 作用：把px单位自动转成rem单位  (作用: 就是之前安装的vscode的插件的作用)
yarn add postcss-pxtorem

// 修改rem基准值的js插件   需要在打包后需要使用
// 作用: 根据设置屏幕的宽度去调整rem的值（html标签上font-size的大小）
//       它的默认计算方式是屏幕宽度的1/10，默认值是37.5
yarn add amfe-flexible

其次 新建配置文件 postcss.config.js（在根目录下创建）

配置 postcss 插件 (37.5 计算方式 => 屏幕宽度 / 10) 设计图对应的标准屏, 其他屏幕会自适应缩放的

原本modules.export导入的语法

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

注意虽然webpack可以用于搭建vue3项目，但是在vite中这种写法是会报错的，且不要直接点击vscode的自动修复，它可能会把你带沟里

//在vite中的正确写法
export default {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

接着是两种方式，要么在main.js或main.ts中导入

import 'amfe-flexible'

或者在src文件夹下新建一个utils文件夹，准备一个rem.js文件

const baseSize = 37.5; //32
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 375;
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {
    setRem();
}

推荐第二种方法，比较稳妥，第一种不知何故会失效