vue3+vite小程序使用rem适配

在 Vue 3 和 Vite 构建的小程序中使用 rem 适配，可以按照以下步骤进行操作：

1. 安装依赖：首先，确保已经安装了 postcss-pxtorem 插件，它可以将 px 单位转换为 rem 单位。可以使用以下命令进行安装：

npm install postcss-pxtorem --save-dev

2. 配置 postcss.config.js：在项目根目录下创建 postcss.config.js 文件，并添加以下配置：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // 设计稿宽度的1/10，如果设计稿是750px，则rootValue为75
      propList: ['*'],
      selectorBlackList: ['html'], // 不转换html选择器中的px
    },
  },
};

3. 修改 Vite 配置：在 vite.config.js 文件中，添加对 postcss 的配置。示例代码如下：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [require('postcss-pxtorem')],
    },
  },
});

4. 设置根元素字体大小：在小程序的根组件（如 App.vue）中，可以设置根元素的字体大小为 rem 单位。示例代码如下：

<template>
  <div class="container">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    document.documentElement.style.fontSize = window.innerWidth / 10 + 'px';
  },
};
</script>

现在，你的小程序中就可以使用 rem 单位进行适配了。当你在 CSS 文件中使用 px 单位时，postcss-pxtorem 插件会自动将其转换为 rem 单位，根据根元素的字体大小进行计算。请确保根据设计稿的宽度设置正确的 rootValue 值，以便正确地适配各种屏幕尺寸。