vue3 使用postcss-px-to-viewport

在Vue3中使用postcss-px-to-viewport插件，你可以按照以下步骤进行配置:
1. 通过npm安装postcss-px-to-viewport插件：`npm i postcss-px-to-viewport`
2. 在vite.config.ts文件中添加配置，引入postcss-px-to-viewport插件，并进行相关参数的设置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import pxtovw from 'postcss-px-to-viewport';

const loader_pxtovw = pxtovw({
  // 设计稿的宽度，根据实际情况进行修改
  viewportWidth: 1920,
  viewportUnit: 'vw'
});

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [loader_pxtovw]
    }
  },
  resolve: {
    alias: {
      '@': resolve('./src')
    }
  },
  base: './', // 打包路径
  server: {
    port: 4000, // 服务端口号
    open: true, // 服务启动时是否自动打开浏览器
    cors: true // 允许跨域
  }
});

这样，你就成功配置了Vue3项目使用postcss-px-to-viewport插件进行px单位转换为vw单位。