Golang模板引擎无法加载CSS和JS文件的问题

Golang模板引擎无法加载CSS和JS文件的问题 大家好， 我想在 Golang 中使用模板引擎加载一个 HTML 文档。我有以下文件：

  • myGoProgram 作为二进制文件
  • /static/
  • /templates/

在我的 goBinary 文件中，我尝试这样加载 CSS：

http.Handle("…/static/", http.StripPrefix("…/static/", http.FileServer(http.Dir(“static”))))
log.Fatal(http.ListenAndServe(":8080", router))

在 HTML 文档内部，我尝试这样加载 CSS 和 app.js：

<link rel="stylesheet" href="../static/css/style.css">
<script src="../static/js/app.js"></script>

当我尝试在没有 Go 二进制文件的情况下加载 HTML 文档时，一切都能正确加载。但是当我尝试这样加载时： 127.0.0.1:8080/login/admin CSS 和 js 文件就无法加载。

请帮我解决这个问题。谢谢。


更多关于Golang模板引擎无法加载CSS和JS文件的问题的实战教程也可以访问 https://www.itying.com/category-94-b0.html

2 回复

感谢亲爱的Peter，他是Gophers Slack社区的一员，帮助解决了这个问题。 我应该使用我定义的那个路由器来处理所有路由，在这个例子中，我使用了go-chi。

https://play.golang.org/p/yasJqCn9D-z

经过这个修改，现在一切都能正确工作了：

fs := http.FileServer(http.Dir("static"))
router.Handle("/static/*", http.StripPrefix("/static/", fs))

这个StackOverFlow主题也帮助了我：

https://stackoverflow.com/questions/57811896/stylesheet-does-not-apply-in-go-html-template-using-chi-router

更多关于Golang模板引擎无法加载CSS和JS文件的问题的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


问题出在你的静态文件处理路径配置上。从你的描述看，当访问 127.0.0.1:8080/login/admin 时，浏览器会尝试从 127.0.0.1:8080/login/admin/../static/css/style.css 加载CSS，这会导致路径不匹配。

以下是正确的解决方案：

package main

import (
    "net/http"
)

func main() {
    // 创建路由器
    router := http.NewServeMux()
    
    // 正确配置静态文件服务
    // 注意：StripPrefix 的第一个参数应该匹配 URL 路径前缀
    staticHandler := http.StripPrefix("/static/", http.FileServer(http.Dir("static")))
    router.Handle("/static/", staticHandler)
    
    // 设置路由处理
    router.HandleFunc("/login/admin", loginAdminHandler)
    
    // 启动服务器
    log.Fatal(http.ListenAndServe(":8080", router))
}

func loginAdminHandler(w http.ResponseWriter, r *http.Request) {
    // 渲染你的模板
    // tmpl.ExecuteTemplate(w, "admin.html", data)
}

然后在HTML模板中，使用绝对路径引用静态文件：

<!DOCTYPE html>
<html>
<head>
    <!-- 使用 /static/ 开头的绝对路径 -->
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="/static/js/app.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

如果你的目录结构是这样的：

project/
├── main.go
├── static/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── app.js
└── templates/
    └── admin.html

关键点：

  1. http.StripPrefix("/static/", ...) 会移除URL中的 /static/ 前缀
  2. http.Dir("static") 会在文件系统中查找 static 目录
  3. HTML中使用 /static/css/style.css 而不是 ../static/css/style.css

这样配置后，当浏览器请求 /static/css/style.css 时：

  • Go服务器会移除 /static/ 前缀
  • 在 static 目录下查找 css/style.css
  • 返回正确的文件内容

对于模板渲染，你可以这样处理：

func loginAdminHandler(w http.ResponseWriter, r *http.Request) {
    tmpl, err := template.ParseFiles("templates/admin.html")
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }
    
    // 执行模板渲染
    err = tmpl.Execute(w, nil)
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
    }
}

这样配置后，CSS和JS文件就能正确加载了。

回到顶部