vite构建的vue3项目适配移动端

需要的工具

1. lib-flexible
2. postcss-pxtorem

步骤一

npm i lib-flexible postcss-pxtorem -D

步骤二

配置vite.config.ts（或者vite.config.js）在此文件中添加以下代码

import postCssPxToRem from "postcss-pxtorem"

接下来找到css部分，添加以下代码，最总如下

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

步骤三

找到main.ts(或者main.js) 加入以下代码

import 'lib-flexible'

步骤四

在index.html中加入以下meta

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

大功告成！！！