angular - 如何修复 Echo 和 Angular 的刷新错误

Question

我正在设置一个网络服务器，使用 Go(使用 Echo)作为后端，Angular 6 作为前端。我所做的是使用 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 使用以下代码为该“dist”文件夹中的静态文件提供服务主.go

func main() {
    e := echo.New()
    e.Static("/", "dist")
    e.File("/", "dist/index.html")
    e.Start(":3000")
}

现在，当我使用浏览器并转到“localhost:3000/”时，页面将被正确提供，由于 Angular 路由，我可以使用 href 导航，例如:“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/index.html”)。在 Echo 路由中找不到或未定义“/home”。因此，您会收到“未找到”消息。

我建议你做的是做以下关于路由

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

在您的 index.html 中，在所请求资源的 URL 之前添加“/dist”。