Vue3+Vite 项目配置rem自适应

Vue3+Vite 项目配置rem自适应

vue3移动端项目自适应配置

依赖安装

npm install postcss-pxtorem 
npm install amfe-flexible
或者
yarn add postcss-pxtorem
yarn add amfe-flexible

安装完成后，在项目得目录中找到vite.config.js，加入如下设置：
注意：根据项目的情况来编写，这里只是一个示例，主要看的内容就是postCssPxToRem。

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'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          // 自适应，px>rem转换
          rootValue: 16,
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          selectorBlackList: ['norem'], // 过滤掉norem-开头的class，不进行rem转换，这个内容可以不写
        }),
      ],
    },
  },
})

---

设置完成后，就已经是可以自动转换rem了，但是还没有做到将rem和px联系在 一起。
需要在main.js中再引入amfe-flexible.

import 'amfe-flexible'

这样就可以实现了px转rem并且自适应设备了。