Vite 打包产物在旧版手机 Edge/WebView 样式丢失排查与降级修复

现象

在开发webtools时，用电脑浏览器和新版手机浏览器访问正常，但在老旧 Android 测试机（如搭载 Edge 44 / 内核约为 Chromium 77，比如小米2S）打开时，页面样式几乎完全丢失，部分交互脚本无法正常执行。

原因排查

手机端 Edge 44 对应的 Blink/Chromium 内核约为 Chromium 77。
项目使用的 Vite 8 默认构建目标面向较新的现代浏览器（大约对齐 Chrome 111+），生成的产物包含部分 Chromium 77 无法解析的原生特性：

1. CSS 媒体查询新语法：
   使用了 @media (width <= 480px) 这种 Range Queries 比较操作符写法。Chromium 77 不支持该语法，整条 CSS 规则被浏览器直接忽略，导致移动端适配样式全军覆没。
2. inset 简写属性：
   Chromium 77 尚未支持 inset 属性（该特性在 Chrome 87 才原生引入），导致绝对定位等规则失效。
3. 现代 JavaScript 语法：
   Vite 8 默认不会转译 ?.（可选链）、??（空值合并操作符）、??= 或 .at() 等新语法。低版本 Chromium 内核在解析时直接报语法错误，导致后续交互脚本中断。
4. color-mix()：
   由于工程代码中原本就包含了后备颜色声明（Fallback），因此未受该属性兼容性影响。

解决方案

在 vite.config.js 中显式指定打包目标，将 JS 与 CSS 编译目标降级至兼容 Chromium 77：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    target: ['chrome77', 'safari13'],
    cssTarget: ['chrome77', 'safari13'],
  },
});

构建产物核验

修改配置后执行重新构建，对输出的 dist 产物进行检索核对：

• 媒体查询：已经自动降级并编译为经典的 @media (max-width: 480px)。
• CSS 样式：全局检索确认无孤立的 inset 简写属性。
• JS 语法：全局检索未发现 ??=、||=、.at( 等高版本语法。按 ES 目标配置，?. 与 ?? 已被转译替换为基础逻辑判断。

验证步骤

1. 运行部署脚本发布新产物：

   npm run publish

2. 在手机端 Edge 浏览器中清除缓存，或使用无痕标签页直接打开目标网址，验证样式渲染与脚本交互恢复正常。