如何使用 Gorilla Mux 在 Go 中正确托管 CSS 和静态资源文件

本文详解如何在基于 gorilla mux 的 go web 服务中正确托管 css、图片等静态资源，解决因路径映射缺失导致样式表和图像无法加载的问题。

默认情况下，gorilla/mux 路由器仅处理显式注册的路由（如 r.HandleFunc("/", HomeHandler)），它不会自动提供静态文件（如 /css/demo.css 或 /images/logo.png）。当浏览器解析 index.html 并请求 时，实际发出的是对 /css/demo.css 的 HTTP GET 请求——但你的代码中未为该路径配置处理器，因此返回 404，CSS 自然失效。

要让 Go 服务器响应这些静态资源请求，需显式注册 http.FileServer，并配合 http.StripPrefix 正确剥离 URL 前缀，使文件系统路径与 URL 路径对齐。

以下是完整、可运行的修复方案：

package main

import (
    "log"
    "net/http"

    "github.com/gorilla/mux"
)

func HomeHandler(w http.ResponseWriter, r *http.Request) {
    http.ServeFile(w, r, "index.html")
}

func main() {
    r := mux.NewRouter()
    r.HandleFunc("/", HomeHandler)

    // ✅ 托管 /css/ 下所有文件：URL /css/*.css → 映射到 ./css/ 目录
    http.Handle("/css/", http.StripPrefix("/css/", http.FileServer(http.Dir("./css/"))))

    // ✅ 托管 /images/ 下所有文件
    http.Handle("/images/", http.StripPrefix("/images/", h
ttp.FileServer(http.Dir("./images/"))))

    // ⚠️ 注意：此处必须将 mux 路由器注册为根处理器（而非 http.Handle("/", r)）
    // 因为 http.Handle 已被用于 /css/ 和 /images/，根路由应交由 r 统一处理
    log.Println("Server running on :8080")
    log.Fatal(http.ListenAndServe(":8080", r))
}

? 关键要点说明：

立即学习“前端免费学习笔记（深入）”；

• http.FileServer(http.Dir("./css/")) 创建一个服务处理器，能读取本地 ./css/ 目录下的文件；
• http.StripPrefix("/css/", ...) 从请求路径中移除 /css/ 前缀，例如 /css/style.css → 变为 style.css，再交由 FileServer 查找 ./css/style.css；
• http.Handle("/css/", ...) 将所有以 /css/ 开头的请求委托给该处理器；
• 顺序很重要：静态资源路由（http.Handle）应在 mux 路由器注册前设置，且最终 http.ListenAndServe 应直接传入 r（而非 nil），否则 mux 路由将不生效（原答案中 http.ListenAndServe(":8080", nil) 是严重错误，会导致 r 完全被忽略）；
• 确保项目目录结构如下：

  ./webserver.go
  ./index.html
  ./css/demo.css
  ./css/style.css
  ./images/logo.png

✅ 验证方式：启动服务后访问 http://localhost:8080/，打开浏览器开发者工具 → Network 标签页，确认 css/demo.css 等资源返回状态码为 200，且内容类型为 text/css。

总结：Gorilla Mux 本身不提供静态文件服务，需结合标准库 http.FileServer + http.StripPrefix 显式挂载静态路径。这是 Go Web 开发中的基础但关键实践，适用于 CSS、JS、图片、字体等所有前端资源。