vue3+vite+ts vant 移动端rem适配

1. 安装px转rem插件

npm install postcss-pxtorem 
npm install amfe-flexible

2. 配置main.ts

import 'amfe-flexible' //引入amfe-flexible

3. 配置vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import postCssPxToRem from 'postcss-pxtorem'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          // 自适应，px>rem转换
          rootValue: 75,
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
        })
      ]
    }
  }
})

4. 安装vant,unplugin-vue-components

控制台执行命令
npm i vant
npm i unplugin-vue-components -D

5. 配置vite.config.ts

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postCssPxToRem from 'postcss-pxtorem'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver'
import { resolve } from 'path'
...
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    ...,
    Components({
      dts: './src/components.d.ts',
      extensions: ['vue', 'md'],
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      // imports 指定组件所在位置，默认为 src/components; 有需要也可以加上 view 目录
      dirs: ['src/components/'],
      resolvers: [VantResolver()],
    }),],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    ...,
    postcss: {
      plugins: [
        postCssPxToRem({
          // 自适应，px>rem转换
          rootValue: 75,
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          exclude: (file) => {
               const ignore = ['node_modules/vant']
               return Boolean(ignore.find(item => file.indexOf(item) !== -1))
           }
        })
      ]
    }
  },
})

6. vant组件内联样式适配处理

   使用vant的van-swipe轮播图插件时，参数width固定接受string|number类型，单位固定为px,对此适配可通过js获取屏幕宽度，与设计图宽度对比动态写入width。代码如下：

// 获取屏幕尺寸,处理swiper卡片宽度适配
const windowWidth = ref(0)
const getWindowResize = function () {
  windowWidth.value = window.innerWidth
}
const swipeItemWidth = computed(() => {
  return (windowWidth.value * 120) / 375
})
getWindowResize()