我正在設(shè)置一個(gè)使用 Go（使用 Echo）作為后端和 Angular 6 作為前端的 Web 服務(wù)器。我所做的是使用 Angular-cli 'ng new my-app' 創(chuàng)建一個(gè)簡(jiǎn)單的應(yīng)用程序，添加一個(gè) helloworld 組件和一個(gè) '/helloworld' 路由，然后使用輸出為 'dist' 的 'ng build --prod' 將其構(gòu)建到生產(chǎn)環(huán)境中' 文件夾。文件夾結(jié)構(gòu)：dist├── assets│ ├── icons│ └── logo.png├── favicon.ico├── index.html├── main.js├── polyfills.js├── runtime.js└── styles.css然后我讓 Go 使用以下代碼 main.go 為該“dist”文件夾中的靜態(tài)文件提供服務(wù)func main() { e := echo.New() e.Static("/", "dist") e.File("/", "dist/index.html") e.Start(":3000")}現(xiàn)在，當(dāng)我使用瀏覽器并轉(zhuǎn)到“l(fā)ocalhost:3000/”時(shí)，頁面將正確提供，我可以使用 href 導(dǎo)航，這要?dú)w功于 Angular 路由，例如：“l(fā)ocalhost:3000/home”頁面將正確顯示但如果我嘗試刷新它，Echo 將返回一個(gè)顯示以下內(nèi)容的頁面內(nèi)容：{“未找到信息”}我知道我可以像這樣手動(dòng)設(shè)置路線：e.File("/home","dist/index.html")但是，如果我有更多的路線，那么做所有這些就很麻煩了。我需要的是任何沒有為 Echo 定義的路由都將映射到“index.html”。我確實(shí)嘗試過：e.File("/*", "dist/index.html")和e.GET("/*", func(c echo.Context) return c.File("dist/index.html")})但后來我得到一個(gè)錯(cuò)誤的空白頁"Uncaught SyntaxError: Unexpected token < " 包含所有 3 個(gè)文件 main.js、polyfill.js 和 runtime.js我是 Echo 的新手，所以我不知道該怎么做。
4 回答
搖曳的薔薇
TA貢獻(xiàn)1793條經(jīng)驗(yàn) 獲得超6個(gè)贊
這個(gè)問題與 Echo 沒有嚴(yán)格的關(guān)系。Angular 進(jìn)行路由的方式是它不從服務(wù)器請(qǐng)求頁面。它更改了 URL 而沒有實(shí)際從服務(wù)器請(qǐng)求另一個(gè)頁面。
因此，當(dāng)您轉(zhuǎn)到“/home”，然后刷新時(shí)，您的瀏覽器將嘗試訪問服務(wù)器并向其請(qǐng)求“/home”（與第一次相反，瀏覽器請(qǐng)求映射到“dist/”的“/” index.html”）。在 Echo 路由中找不到或未定義“/home”。因此，您會(huì)收到一條“未找到”消息。
我建議您執(zhí)行以下有關(guān)路由的操作
e.Static("/dist", "dist")
e.File("/*", "dist/index.html")
e.Start(":3000")
并在index.html請(qǐng)求資源的 URL 之前添加“/dist”。
慕碼人8056858
TA貢獻(xiàn)1803條經(jīng)驗(yàn) 獲得超6個(gè)贊
echo中的static middleware也有一個(gè)HTML5選項(xiàng)：eg
e.Use(middleware.StaticWithConfig(middleware.StaticConfig{
Root: "dist",
Index: "index.html",
Browse: true,
HTML5: true,
}))
這似乎處理 SPA 網(wǎng)頁。
jeck貓
TA貢獻(xiàn)1909條經(jīng)驗(yàn) 獲得超7個(gè)贊
將此留在這里作為替代方案，以防萬一有人想要一個(gè)完整的示例。使用“/*”將捕獲任何以“/”開頭的路由或您想要的任何尚未定義的前綴。
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貢獻(xiàn)1859條經(jīng)驗(yàn) 獲得超6個(gè)贊
在深入了解 Echo 之后，我也設(shè)法找到了另一種解決方案。Echo 有一個(gè)處理所有未知路由的 NotFoundHandler，所以我所做的只是讓它在每次請(qǐng)求未定義的路由時(shí)返回“index.html”。這是我的代碼：
echo.NotFoundHandler = func(c echo.Context)
return c.File("dist/index.html")
}
e := echo.New()
e.Static("/", "dist")
e.Start(":3000")
我不確定這是否是一個(gè)好方法，但對(duì)于像我這樣有同樣問題的人來說，這是另一種選擇
- 4 回答
- 0 關(guān)注
- 191 瀏覽
添加回答
舉報(bào)
0/150
提交
取消