vue3 + ts + vite vant 将px转rem

在Vue 3项目中使用TypeScript和Vite构建工具，并且使用Vant组件库时，可以使用postcss-pxtorem插件将px单位转换为rem单位。

首先，在项目根目录下的`postcss.config.js`文件中配置postcss-pxtorem插件：

module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 16, // 基准值，根据设计稿调整
      propList: ['*'],
    }),
  ],
};

上述配置中，`rootValue`表示1rem对应的像素大小，可以根据你的设计稿进行调整。`propList`表示要转换的属性列表，`'*'`表示全部属性。

然后，在Vite的配置文件`vite.config.js`中，添加postcss配置：

const { createVuePlugin } = require('vite-plugin-vue2');
const vue2 = createVuePlugin();

module.exports = {
  plugins: [
    vue2,
  ],
  css: {
    postcss: {
      plugins: [
        require('postcss-pxtorem')({
          rootValue: 16,
          propList: ['*'],
        }),
      ],
    },
  },
};

这样配置之后，项目中的样式文件中的px单位就会被自动转换为rem单位了。需要注意的是，Vite默认支持导入CSS文件，但不会对其进行处理，如果你想使用Vant组件库的样式，需要将Vant的样式文件单独引入到你的项目中。

以下是一个使用Vant组件库的Vue 3 + TypeScript + Vite项目的示例：

// main.ts
import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
import App from './App.vue';

const app = createApp(App);
app.use(Vant);
app.mount('#app');

这样就可以在Vue 3项目中使用TypeScript和Vite构建工具，并将px单位转换为rem单位了。希望对你有所帮助！如果还有其他问题，请随时提问。