我正在設置一個使用 Go（使用 Echo）作為后端和 Angular 6 作為前端的 Web 服務器。我所做的是使用 Angular-cli 'ng new my-app' 創建一個簡單的應用程序，添加一個 helloworld 組件和一個 '/helloworld' 路由，然后使用輸出為 'dist' 的 'ng build --prod' 將其構建到生產環境中' 文件夾。文件夾結構：dist├── assets│ ├── icons│ └── logo.png├── favicon.ico├── index.html├── main.js├── polyfills.js├── runtime.js└── styles.css然后我讓 Go 使用以下代碼 main.go 為該“dist”文件夾中的靜態文件提供服務func main() { e := echo.New() e.Static("/", "dist") e.File("/", "dist/index.html") e.Start(":3000")}現在，當我使用瀏覽器并轉到“localhost:3000/”時，頁面將正確提供，我可以使用 href 導航，這要歸功于 Angular 路由，例如：“localhost:3000/home”頁面將正確顯示但如果我嘗試刷新它，Echo 將返回一個顯示以下內容的頁面內容：{“未找到信息”}我知道我可以像這樣手動設置路線：e.File("/home","dist/index.html")但是，如果我有更多的路線，那么做所有這些就很麻煩了。我需要的是任何沒有為 Echo 定義的路由都將映射到“index.html”。我確實嘗試過：e.File("/*", "dist/index.html")和e.GET("/*", func(c echo.Context) return c.File("dist/index.html")})但后來我得到一個錯誤的空白頁"Uncaught SyntaxError: Unexpected token < " 包含所有 3 個文件 main.js、polyfill.js 和 runtime.js我是 Echo 的新手，所以我不知道該怎么做。
4 回答
搖曳的薔薇
TA貢獻1793條經驗 獲得超6個贊
這個問題與 Echo 沒有嚴格的關系。Angular 進行路由的方式是它不從服務器請求頁面。它更改了 URL 而沒有實際從服務器請求另一個頁面。
因此，當您轉到“/home”，然后刷新時，您的瀏覽器將嘗試訪問服務器并向其請求“/home”（與第一次相反，瀏覽器請求映射到“dist/”的“/” index.html”）。在 Echo 路由中找不到或未定義“/home”。因此，您會收到一條“未找到”消息。
我建議您執行以下有關路由的操作
e.Static("/dist", "dist")
e.File("/*", "dist/index.html")
e.Start(":3000")
并在index.html請求資源的 URL 之前添加“/dist”。
慕碼人8056858
TA貢獻1803條經驗 獲得超6個贊
echo中的static middleware也有一個HTML5選項：eg
e.Use(middleware.StaticWithConfig(middleware.StaticConfig{
Root: "dist",
Index: "index.html",
Browse: true,
HTML5: true,
}))
這似乎處理 SPA 網頁。
jeck貓
TA貢獻1909條經驗 獲得超7個贊
將此留在這里作為替代方案，以防萬一有人想要一個完整的示例。使用“/*”將捕獲任何以“/”開頭的路由或您想要的任何尚未定義的前綴。
package main
import (
"github.com/labstack/echo/v4"
"github.com/labstack/echo/v4/middleware"
)
const (
HTTP_PORT = ":1234"
)
func main() {
e := echo.New()
// Logger Middleware
e.Use(middleware.Logger())
// Setup routes
SetupRoutes(e)
e.Logger.Fatal(e.Start(HTTP_PORT))
}
func SetupRoutes(e *echo.Echo) {
// Catpure route /
e.GET("/", getWebApp)
// Catpure route /test
e.GET("/test", getTest)
// Catpure all routes starting with / that haven't been defined
e.GET("/*", getWebApp)
// Use e.Any() for all request methods GET, PUT, POST, PATCH and DELETE
e.Any("/*", getWebApp)
}
func getWebApp(ctx echo.Context) error {
return ctx.File("../website_src/index.html")
}
func getTest(ctx echo.Context) error {
return ctx.String(http.StatusOK, "Hello")
}
BIG陽
TA貢獻1859條經驗 獲得超6個贊
在深入了解 Echo 之后，我也設法找到了另一種解決方案。Echo 有一個處理所有未知路由的 NotFoundHandler，所以我所做的只是讓它在每次請求未定義的路由時返回“index.html”。這是我的代碼：
echo.NotFoundHandler = func(c echo.Context)
return c.File("dist/index.html")
}
e := echo.New()
e.Static("/", "dist")
e.Start(":3000")
我不確定這是否是一個好方法，但對于像我這樣有同樣問題的人來說，這是另一種選擇
- 4 回答
- 0 關注
- 194 瀏覽
添加回答
舉報
0/150
提交
取消