vite.config.ts如何适配postcss-pxtorem+amfe-flexible

要在vite.config.ts中适配postcss-pxtorem和amfe-flexible，需要进行如下配置：

1. 安装依赖

首先，需要安装postcss-pxtorem和amfe-flexible这两个库，可以使用npm或yarn进行安装：

npm install postcss-pxtorem amfe-flexible --save-dev

yarn add postcss-pxtorem amfe-flexible --dev

2. 配置vite.config.ts

在vite.config.ts中，需要添加一个postcss插件，并将amfe-flexible作为其参数传入，同时也需要配置postcss-pxtorem插件，代码如下：

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

export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'postcss',
      async transform(css, id) {
        if (id.endsWith('.vue') || id.endsWith('.css')) {
          const { default: postcss } = await import('postcss');
          const { default: flexible } = await import('amfe-flexible');
          const processor = postcss([postcssPxToRem({
            rootValue: 37.5,
            propList: ['*'],
          })]);
          const result = await processor.process(css, { from: id });
          return {
            code: result.css,
            map: result.map,
          };
        }
      },
      enforce: 'post',
    },
  ],
});

这里使用了vite的postcss插件，该插件可以通过调用postcss的API来处理CSS文件。在transform函数中，首先判断当前文件的类型是否为.vue或.css，然后使用postcss-pxtorem将px转换成rem，其中rootValue为根元素的字体大小，propList为要转换的属性列表，这里设置为所有属性都转换。

同时，将amfe-flexible作为postcss插件的参数传入，这样就可以自适应不同屏幕尺寸。

需要注意的是，由于postcss插件是异步执行的，因此需要使用async/await来等待插件执行完成后再返回结果。

以上就是在vite.config.ts中适配postcss-pxtorem和amfe-flexible的方法。