vue3+ts+vite 将px转为rem

在Vue 3中使用TypeScript和Vite开发项目时，将像素（px）转换为rem有几种方法。以下是其中一种常用的方法：

1. 首先，为了方便转换，你可以在根组件中设置一个基准字体大小。在`App.vue`文件中，你可以添加以下代码：

<template>
  <div id="app">
    <!-- your app content -->
  </div>
</template>

<script>
export default {
  created() {
    // 根据设计稿的尺寸设置基准字体大小，例如设计稿宽度为750px，基准字体大小为100px
    const baseFontSize = 100;
    const designWidth = 750;
    const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    document.documentElement.style.fontSize = `${(screenWidth / designWidth) * baseFontSize}px`;
  },
};
</script>

<style>
/* 全局样式中可以使用rem单位 */
body {
  font-size: 16px; /* 可以使用px作为备用单位 */
}
</style>

通过以上代码，我们可以将根元素的字体大小设置为屏幕宽度的比例乘以基准字体大小，从而实现根据屏幕宽度自动调整字体大小。

2. 在项目中使用`postcss-pxtorem`插件来自动将px单位转换为rem单位。首先，安装插件：

npm install postcss-pxtorem --save-dev

然后，在项目根目录下创建一个`postcss.config.js`文件，配置插件：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100, // 设置基准字体大小，与设计稿一致
      propList: ['*'], // 需要转换的属性，这里表示所有属性都需要转换
    },
  },
};

最后，在`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')],
    },
  },
});

这样，在你的Vue组件中使用px单位时，它们将自动转换为rem单位。

这是一种常用的方法。当然，还有其他一些工具和方法可以实现将px转换为rem，请根据你的项目需求选择适合的方法。