vue3 + Ts + Vite移动端pc适配教程

1.首先安装两个插件

lib-flexible和postcss-pxtorem
 

yarn add lib-flexible postcss-pxtorem -D

2.配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postCssPxToRem from "postcss-pxtorem"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css:{
    // 此代码为适配移动端px2rem
      postcss: {
        plugins: [
          postCssPxToRem({
            rootValue: 37.5, // 1rem的大小
            propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          })
        ]
      }
    }
})

3.找到main.ts加入以下代码

import 'lib-flexible'