ScalaJS新手求助：Finch后端HTML无法加载fastopt.js报404

嘿，我之前在Scala.js + Finch的项目里也踩过这个404的坑，给你几个实用的解决步骤，应该能帮你搞定：

1. 给Finch添加静态资源路由 #

Finch默认不会自动暴露项目的target目录下的文件，所以你需要手动添加一个端点来处理JavaScript文件的请求。这里有个简单的实现：

import com.twitter.finagle.http.Request
import io.finch._
import java.nio.file.Paths
import java.io.File

// 定义静态资源端点，匹配/js/开头的请求，指向target/scala-2.12目录
val staticJsEndpoint: Endpoint[Unit] = get("js" :: path) { (pathSegments: String) =>
  // 拼接完整文件路径
  val targetDir = Paths.get("target", "scala-2.12").toAbsolutePath
  val jsFile = new File(targetDir.toFile, pathSegments)
  
  if (jsFile.exists() && jsFile.isFile) {
    Ok(jsFile)
  } else {
    NotFound(s"Cannot find file: ${jsFile.getAbsolutePath}")
  }
}

// 把这个静态端点和你的/index端点组合起来
val allEndpoints = staticJsEndpoint :+: yourIndexEndpoint

2. 修正HTML中的script标签路径 #

确保你的Scalatag生成的HTML里，script标签的src属性和上面的路由匹配。比如如果静态路由是/js/fastopt.js，那script标签应该这么写：

import scalatags.Text.all._

val html = html(
  body(
    // 你的页面内容
    script(src := "/js/fastopt.js")
  )
)

3. 排查常见的坑点 #

• 确认服务启动目录：如果你的Finch服务不是在项目根目录下启动的，target/scala-2.12的相对路径就会出错。可以用Paths.get("target/scala-2.12").toAbsolutePath来打印实际路径，检查是否和文件实际位置一致。
• 文件权限：确保fastopt.js有可读权限，避免Finch无法读取文件返回404。
• 检查路由优先级：确保静态资源端点在其他通配符路由之前，避免请求被错误拦截。

生产环境的小提示 #

如果是准备部署到生产环境，建议不要直接servetarget目录，而是把fullOptJS生成的优化后的JavaScript文件复制到项目的src/main/resources目录下，然后用Finch的serveResource方法来加载类路径里的静态资源，这样更安全也更符合生产规范。

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