Kotlin Compose Web项目运行时无法加载主JS文件如何解决？

• 检查index.html中的JS引用路径
  单模块项目中生成的JS文件默认会放在Dev Server能直接访问的目录，但多模块项目的编译输出路径更深。你需要确认index.html里的<script>标签src属性是否和实际生成的文件路径匹配。比如你的文件在web/build/compileSync/main/developmentExecutable/kotlin/kotlin-multi-web.js，可以尝试把src改成/kotlin/kotlin-multi-web.js，或者根据index.html与JS文件的相对位置调整路径。

• 添加Gradle资源复制任务
  手动配置Gradle将生成的JS文件复制到Dev Server默认扫描的静态资源目录，比如src/jsMain/resources。在web模块的build.gradle.kts中添加以下任务：

  tasks.register<Copy>("copyJsBundleToResources") {
      from("$buildDir/compileSync/main/developmentExecutable/kotlin")
      include("*.js")
      into("src/jsMain/resources")
  }
  
  // 让jsBrowserRun任务依赖这个复制任务，确保启动前文件已就位
  tasks.named("jsBrowserRun") {
      dependsOn("copyJsBundleToResources")
  }
  

• 扩展Dev Server的静态资源目录
  直接让Dev Server扫描JS文件的生成目录，无需复制文件。在web模块的build.gradle.kts的js配置中添加：

  kotlin {
      js {
          browser {
              commonWebpackConfig {
                  devServer = (devServer ?: org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig.DevServer()).apply {
                      static = (static ?: mutableListOf()).apply {
                          // 添加JS文件所在的编译目录
                          add("$buildDir/compileSync/main/developmentExecutable/kotlin")
                      }
                  }
              }
          }
      }
  }
  

• 验证模块构建依赖顺序
  虽然Gradle通常会自动处理模块依赖，但偶尔可能出现web模块编译时common模块输出未就绪的情况。可以在web模块的build.gradle.kts中显式声明依赖：

  tasks.named("compileKotlinJs") {
      dependsOn(":common:compileKotlinCommon")
  }
  

单模块项目能正常运行，是因为其编译输出的JS文件默认处于Dev Server的静态资源扫描范围内，而多模块项目的编译目录结构更复杂，需要额外配置让Dev Server找到对应的文件。

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