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

然后让Go用以下代码为该“ dist”文件夹中的静态文件提供服务 main.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”）。在回声路由中未找到或未定义“ / home”。因此，您会收到未找到消息。

我建议您做的是关于路由的以下操作

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

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

Answer 2

echo的静态中间件中还有一个HTML5选项：例如

e.Use(middleware.StaticWithConfig(middleware.StaticConfig{
        Root:   "dist",
        Index: "index.html",
        Browse: true,
        HTML5:  true,
    }))

似乎可以处理SPA网页。

Answer 3

@Seaskyways的答案对我来说非常有用，但是在深入研究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")

我不确定这是否是一个好方法，但是对于像我这样的同样问题的人，这是另一种选择

如何使用Echo和Angular解决刷新错误

3 个答案: