如何使用Echo和Angular修复刷新错误

Question

我正在设置一个Web服务器,Go(使用Echo)作为后端,Angular 6作为前端.我做的是使用Angular-cli'ng new my-app'创建一个简单的应用程序,添加一个helloworld组件和一个'/ helloworld'路径,然后使用'ng build --prod'将其构建到生产中,输出为'dist '文件夹.文件夹结构:

dist
??? assets
?   ??? icons
?   ??? logo.png
??? favicon.ico
??? index.html
??? main.js
??? polyfills.js
??? runtime.js
??? styles.css

然后,我使用以下代码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的新手,所以我不知道该怎么做.

Answer 1

该问题与 Echo 并不严格相关。Angular 进行路由的方式是它不会从服务器请求页面。它更改 URL，而无需实际从服务器请求另一个页面。

因此，当您转到“/home”，然后刷新时，您的浏览器将尝试访问服务器并向其请求“/home”（与第一次相反，浏览器请求映射到“dist/”的“/”索引.html”）。在 Echo 路由中未找到或定义“/home”。因此，您会收到“未找到”消息。

我建议您执行以下有关路由的操作

e.Static("/dist", "dist")
e.File("/*", "dist/index.html")
e.Start(":3000")

并在index.html请求资源的 URL 之前添加“/dist”。