Compose/WasmJS如何从非根路径访问composeResources？

问题原因 #

当从/path路径访问页面时，Compose默认以当前页面的相对路径加载composeResources，会发起/path/composeResources/...的请求，但实际资源文件是打包在根目录的composeResources文件夹下，因此触发404错误。

解决方案 #

1. 显式指定资源根路径 #

在Wasm端的初始化代码中，强制资源从网站根目录加载，不受当前页面路径影响：

fun main() {
    // 固定资源加载的根路径
    val resourcesRoot = "/composeResources/"
    ComposeWebApplication {
        resourcesPath = resourcesRoot
        // 你的Compose页面内容
        Content()
    }
}

2. 修正HTML中的脚本引用 #

确保path/index.html里引用的Compose JS文件使用根相对路径（开头加/），避免从子路径加载脚本：

<!-- 错误写法：相对路径会导致从/path/下加载脚本 -->
<script src="my-app.js"></script>

<!-- 正确写法：从网站根目录加载脚本 -->
<script src="/my-app.js"></script>

3. 确认Gradle打包规则 #

默认Gradle配置会将wasmJsMain/resources下的非HTML资源（如composeResources）打包到构建产物的根目录，若有自定义打包逻辑，需保证：

• composeResources文件夹最终输出在网站根目录
• path/index.html保持在构建产物的/path/子目录下

验证方式 #

启动应用后访问http://localhost:8080/path，打开浏览器开发者工具的网络面板：

• 正常请求应为http://localhost:8080/composeResources/my.package.name/drawable/compose-multiplatform.xml
• 若仍请求/path/composeResources/...，检查是否正确设置了resourcesPath参数

内容的提问来源于stack exchange，提问作者Some Noob Student