Compose Web生产环境部署白屏求助（已部分解决）

问题概述 #

执行gradle wasmJsBrowserDistribution构建Kotlin Compose WASM项目后，将composeApp/build/dist/wasmJs/productionExecutable目录下的文件上传至Aruba服务器，页面仅显示favicon和标题，主体内容全白。本地运行完全正常，添加.htaccess配置AddType application/wasm .wasm后Chrome可正常显示，但Firefox仍报MIME类型错误。

解决方案 #

针对Firefox对WASM文件更严格的MIME校验规则，在.htaccess文件中补充以下配置：

# 指定WASM文件的MIME类型
AddType application/wasm .wasm
# 强制设置响应头的Content-Type值
Header set Content-Type "application/wasm"
# 可选：开启WASM文件的压缩传输，优化加载性能
AddOutputFilterByType DEFLATE application/wasm

补充说明 #

1. Firefox需要服务器明确返回Content-Type: application/wasm响应头，仅通过AddType可能无法触发服务器正确设置该头，额外添加Header set可以强制生效。
2. 确认Aruba服务器允许使用.htaccess修改配置，若服务器未开启AllowOverride权限，需联系主机服务商调整。
3. 修改配置后清理Firefox缓存再重新加载页面，避免旧缓存的响应头干扰。

附：当前代码参考 #

Main函数代码 #

import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.window.ComposeViewport
import kotlinx.browser.document

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    ComposeViewport(document.body!!) {
        App()
    }
}

index.html代码 #

<!DOCTYPE html>
<html lang="it-IT">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my new site</title>
    <link rel="icon" type="image/x-icon" href="composeResources/web_jkd_compose.composeapp.generated.resources/drawable/favicon.ico">
    <link type="text/css" rel="stylesheet" href="styles.css">
    <script type="application/javascript" src="composeApp.js"></script>
</head>
<body>
</body>
</html>

内容的提问来源于stack exchange，提问作者Stefano Milani