如何在Tauri+Vite项目中实现平台专属CSS/HTML？

方法1：通过Tauri平台API动态导入 #

在项目入口文件（比如src/main.js/src/main.ts）中，利用Tauri的os模块判断当前运行平台，动态加载对应样式文件：

import { os } from '@tauri-apps/api';

async function loadPlatformSpecificStyles() {
  const platform = await os.platform();
  if (platform === 'darwin') {
    await import('./mac.css');
  } else if (platform === 'win32') {
    await import('./window.css');
  }
}

loadPlatformSpecificStyles();

方法2：借助Vite环境变量实现构建时区分 #

1. 在tauri.conf.json中配置环境变量占位：

{
  "build": {
    "env": {
      "VITE_TARGET_PLATFORM": ""
    }
  }
}

2. 在package.json的构建脚本中，针对不同平台注入环境变量：

{
  "scripts": {
    "tauri:build:mac": "VITE_TARGET_PLATFORM=darwin npm run tauri build",
    "tauri:build:win": "VITE_TARGET_PLATFORM=win32 npm run tauri build"
  }
}

3. 在入口文件中根据环境变量导入对应CSS：

if (import.meta.env.VITE_TARGET_PLATFORM === 'darwin') {
  import('./mac.css');
} else if (import.meta.env.VITE_TARGET_PLATFORM === 'win32') {
  import('./window.css');
}

方法3：CSS媒体查询（仅适用于小范围样式差异） #

如果只是少量平台专属样式，可以用WebKit/IE专属媒体查询区分：

/* macOS 专属样式 */
@media (-webkit-min-device-pixel-ratio: 1) {
  /* 你的mac样式规则 */
}

/* Windows 专属样式 */
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* 你的Windows样式规则 */
}

这种方法局限性较强，仅适合简单样式调整，推荐优先使用前两种方案。

内容的提问来源于stack exchange，提问作者Ostap Brehin