Vue3+Vite3+Ts4 configuration mobile terminal adaptation

1. Install the plug-in

npm i  postcss-pxtorem -D
npm i amfe-flexible -D

2. Configure vite.config.ts

import package

import postCssPxToRem from "postcss-pxtorem"

Configure css in the corresponding location.

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

3. Import files

Introduce amfe-flexible in mian.ts file

import 'amfe-flexible'

4. Effect