Go Web应用无法加载CSS文件的问题排查与解决求助

问题原因分析 #

1. 相对路径解析逻辑错误：浏览器是根据当前页面的URL路径解析相对资源路径，而非模板文件在服务器上的物理路径。比如访问http://localhost:8080/register时，../../assets/css/styles.css会被解析为http://localhost:8080/../assets/css/styles.css，这与静态资源的实际路由不匹配。
2. 静态文件服务根目录路径错误：你的http.Dir("./assets")依赖运行main.go时的工作目录。如果在frontend目录执行go run cmd/main.go，程序会去frontend/assets找文件，但实际assets目录在frontend/cmd/assets，导致路径不匹配。

解决方案 #

1. 修正静态文件服务的根目录路径 #

使用绝对路径确保静态服务指向正确的assets目录，避免工作目录变化导致的路径错误：

package main

import (
    "log"
    "net/http"
    "os"
    "path/filepath"
)

func main() {
    // 获取当前可执行文件所在目录
    exeDir, err := filepath.Abs(filepath.Dir(os.Args[0]))
    if err != nil {
        log.Fatal(err)
    }
    // 拼接assets目录的绝对路径
    assetsDir := filepath.Join(exeDir, "assets")
    // 启动静态文件服务
    fs := http.FileServer(http.Dir(assetsDir))
    http.Handle("/assets/", http.StripPrefix("/assets/", fs))

    // 此处添加你的模板渲染等其他路由逻辑
    // ...

    log.Println("Server running on :8080")
    log.Fatal(http.ListenAndServe(":8080", nil))
}

2. 修改HTML模板中的CSS引用为绝对路径 #

将模板中的相对路径改为以/开头的绝对路径，确保浏览器从网站根目录请求资源：

<link rel="stylesheet" type="text/css" href="/assets/css/styles.css">

这样无论访问哪个页面URL，浏览器都会请求http://localhost:8080/assets/css/styles.css，静态服务会正确从frontend/cmd/assets/css/styles.css读取文件，解决404问题。

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