在 Vue 3 + Vite 项目中使用 Less 实现自适应布局：VW 和 VH 的应用

1. less的计算代码

@charset "utf-8";// 默认设计稿的宽度(根据开发UI稿更改)
@designWidth: 1920;// 默认设计稿的高度(根据开发UI稿更改)
@designHeight: 1080;.vw(@name, @px) {@{name}: (@px / @designWidth) * 100vw;
}.vh(@name, @px) {@{name}: (@px / @designHeight) * 100vh;
}.font(@px) {font-size: (@px / @designWidth) * 100vw;
}

2. vite.config.js里面的配置

// https://vite.dev/config/
export default defineConfig(({ mode }) => {const { VITE_WEB_BASE_URL, VITE_WEB_PROXY_TARGET } = loadEnv(mode, process.cwd(), '')return {plugins: [vue(),],css: {preprocessorOptions:{less:{additionalData:`@import "@/styles/utils.less";` //less工具函数的目录文件 一定要加分号}}},// 别名配置resolve: {alias: {'@': path.resolve(__dirname, './src'),}},}
})

3. 使用

.header-icon {.vw(width, 16);.vh(height, 18);display: flex;align-items: center;justify-content: center;
}
.result-title {width: 100%;color: #ffffff;.font(18);font-weight: 400;font-family: "SourceHanSansCN";
}