vue3使用postcss-px-to-viewport 附带vite配置

postcss-px-to-viewport做前端自适应，适用于pc和移动
1.下载 postcss-px-to-viewport 插件

npm i postcss-px-to-viewport

2.在vite.config.ts中添加配置(整个文件都给你们)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import pxtovw from 'postcss-px-to-viewport'
const loder_pxtovw = pxtovw({
//这里是设计稿宽度 自己修改
  viewportWidth: 1920,
  viewportUnit: 'vw'
})
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [loder_pxtovw]
    }
  },

  resolve: {
    alias: {
      '@': resolve('./src')
    }
  },
  base: './', // 打包路径
  server: {
    port: 4000, // 服务端口号
    open: true, // 服务启动时是否自动打开浏览器
    cors: true // 允许跨域
  },
})

3.新建个vue文件，看看效果

<template>
  <div class="loginSty">
    <div class="head">标题</div>
  </div>
</template>

<style>
.loginSty {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  width: 1920px;
  height: 100vh;
  background: url("@/assets/img/loginBg.png") 100% / cover no-repeat;
}
.head {
  width: 578px;
  height: 110px;
  line-height: 110px;
  margin-top: 200px;
  color: #fff;
  font-size: 57px;
  border: 1px solid red;
  text-align: center;
}
</style>

很多使用postcss的帖子是 创建vue.config.js或者postconfig.js那是vue cli创建的项目中用的，vue3+vite 就是在vite.config.ts中配置。
有用点个赞，没用不要喷~