vite-plugin-uni-rem

English | 中文

A lightweight Vite plugin to patch UniApp REM calculations for better responsive design support.

Features

• 🔧 Patches UniApp's hardcoded font size calculations
• 📱 Improves RPX to REM conversion logic
• ⚡ Zero configuration required
• 🎯 Targets only UniApp core files

Installation

npm install vite-plugin-uni-rem --save-dev

Usage

Add the plugin to your vite.config.js:

// ES Module
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import uniRemPlugin from 'vite-plugin-uni-rem'

export default defineConfig({
  plugins: [
    uni(),
    uniRemPlugin()
  ]
})

// CommonJS
const { defineConfig } = require('vite')
const uni = require('@dcloudio/vite-plugin-uni')
const uniRemPlugin = require('vite-plugin-uni-rem')

module.exports = defineConfig({
  plugins: [
    uni(),
    uniRemPlugin()
  ]
})

What it does

This plugin automatically patches UniApp's core files to:

1. Font Size Calculation: Replaces hardcoded 23.4375 divisor with configurable baseWidth2 / 32
2. RPX Conversion: Uses rpxCalcBaseDeviceWidth from global config instead of hardcoded BASE_DEVICE_WIDTH

Technical Details

The plugin transforms files matching the pattern:

node_modules/@dcloudio/*/dist*/*.js

And applies these replacements:

• width / 23.4375 → width / (baseWidth2 / 32)
• number / BASE_DEVICE_WIDTH * width → number / checkValue((__uniConfig.globalStyle || {}).rpxCalcBaseDeviceWidth, BASE_DEVICE_WIDTH) * width

Compatibility

• ✅ Vite
• ✅ UniApp

License

MIT © xiashui