企业官网建设流程全解析

一、背景说明

• 项目为一套代码多端运行，同时部署：H5 移动端浏览器、Electron 桌面客户端
• 设计稿基准宽度：375px
• 采用postcss‑pxtorem将代码内px单位自动转换为rem实现屏幕自适应

二、依赖安装

# rem转换插件 npm install postcss-pxtorem # ts类型声明（开发依赖） npm install -D @types/postcss-pxtorem

三、公共配置

该配置在移动端、Electron 端都会执行 px→rem 转换，转换规则统一，环境区分交给前端JS代码控制。

在移动端vite配置文件中配置：

css: { postcss: { plugins: [ postCssPxToRem({ rootValue: 37.5, // 设计稿宽度 / 10 = 375 / 10 propList: ['*'], // 所有属性px转rem }) ] } }

⚠️注意

如果只是移动端，只设置这部分就可以实现适配，electron双端还需要进行格外的配置。

1、移动端浏览器环境

配合 JS 动态设置根字号后，1rem跟随屏幕宽度变化；rootValue:37.5，代表设计稿 375 宽下，1rem = 37.5px，换算正常，页面适配正常。

2、Electron 渲染进程环境

Electron 默认根字号固定为16px。 例：CSS 写font‑size:16px→ 插件转换后0.4267rem实际渲染字号 =0.4267 * 16 = 6.83px，字体、元素尺寸整体缩小，出现适配异常。

四、Vite 构建配置（区分electron双端环境变量）

Electron 端配置：vite.electron.config.ts

preload: { define: { IS_MOBILE: JSON.stringify(false) } },

移动端 H5 配置：vite.mobile.config.ts

preload: { define: { IS_MOBILE: JSON.stringify(true) } },

IS_MOBILE为编译期全局常量，用于代码运行时判断当前运行平台。

五、预加载脚本 preload 注入全局环境标识

文件路径：preload/index.ts

const appInfo = { isMobile: IS_MOBILE }; if (process.contextIsolated) { try { contextBridge.exposeInMainWorld('appInfo', appInfo); } catch (error) { console.error(error); } } else { // @ts-ignore (define in dts) window.appInfo = appInfo; }

六、平台导出封装

Electron 平台文件platform/electron/index.ts

/**应用环境信息 */ export const appInfo = window.appInfo;

H5 移动端平台文件platform/jsbridge/index.ts

export const appInfo = { isMobile: IS_MOBILE };

七、根字号自适应核心代码（App.vue 入口）

仅移动端浏览器执行 rem 根字号计算；Electron 桌面端跳过，使用默认根字号

<script setup lang="ts"> import { appInfo } from '@platform'; /** * 设置html根字体大小，实现rem自适应 * 设计稿基准宽度：375px */ function setRootFontSize() { const designWidth = 375; const fontSize = (window.innerWidth / designWidth) * 37.5; document.documentElement.style.fontSize = fontSize + 'px'; } // 判断为移动端H5环境，开启rem适配 if (appInfo.isMobile) { setRootFontSize(); window.addEventListener('resize', setRootFontSize); } </script>