Go-Echo-Templ项目静态样式表引用失败求助

项目结构 #

/
/cmd
    main.go
/static
    css
        style.css
/view
    /layout
        base.templ

问题现象 #

• 页面生成的样式表链接为 <link rel="stylesheet" href="static/css/style.css">
• 点击该链接返回Echo的404错误：{"message":"Not Found"}

现有代码 #

main.go #

package main

import (
    "fmt"
    "os"

    "github.com/RollingITGuy/go-rerun-dist/handler"
    "github.com/labstack/echo/v4"
)

func main() {
    app := echo.New()
    app.Static("/static", "static")
    handler := handler.IndexHandler{}

    app.GET("/", handler.HandleShowIndex)

    err := app.Start(":5150")
    if err != nil {
        apperr := fmt.Errorf("server start failed; %w", err)
        fmt.Fprintf(os.Stderr, "%+v\n", apperr)
    }

    os.Exit(0)
}

base.templ #

package layout

templ Base() {
    <html>
        <head>
            <link rel="stylesheet" href="static/css/style.css" />
            <title>Here</title>
        </head>
        <body>
            { children... }
        </body>
        <footer>
        </footer>
    </html>
}

问题根源 #

1. 静态文件路径匹配错误：Echo的Static方法第二个参数是相对于程序运行目录的文件路径。如果在/cmd目录下运行main.go，程序会去/cmd/static找文件，但你的static文件夹在项目根目录，导致找不到。
2. 样式表链接为相对路径：虽然当前访问根路径时看起来没问题，但如果页面路径层级变化，相对路径会失效，且结合上面的路径问题，直接导致404。

修复方法 #

方法1：修正Static方法的文件路径 #

如果习惯在cmd目录下运行程序，把Static的路径改为指向项目根的static：

app.Static("/static", "../static")

更稳妥的方式是通过代码自动获取正确路径，避免手动调整：

import (
    "fmt"
    "os"
    "path/filepath"

    "github.com/RollingITGuy/go-rerun-dist/handler"
    "github.com/labstack/echo/v4"
)

func main() {
    app := echo.New()
    
    currentDir, err := os.Getwd()
    if err != nil {
        panic(err)
    }
    // 拼接项目根目录下的static路径
    staticDir := filepath.Join(currentDir, "../static")
    app.Static("/static", staticDir)

    handler := handler.IndexHandler{}
    app.GET("/", handler.HandleShowIndex)

    err = app.Start(":5150")
    if err != nil {
        apperr := fmt.Errorf("server start failed; %w", err)
        fmt.Fprintf(os.Stderr, "%+v\n", apperr)
    }

    os.Exit(0)
}

方法2：修改样式表为绝对路径（推荐） #

把templ文件中的href改为绝对路径，确保无论页面在哪，都从根目录加载静态文件：

<link rel="stylesheet" href="/static/css/style.css" />

方法3：调整程序运行目录 #

从项目根目录启动程序，这样Static方法的路径参数就能正确匹配：

# 在项目根目录执行命令
go run cmd/main.go

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