Flask 静态提供的 vue-router 应用程序在 Heroku 上显示 404 自定义页面

Question

我浏览了几个 Stack Overflow 页面和 the official Vue guide，但我的应用在转到其他页面时仍然 returns 404 结果。

我的应用程序的结构如下所示，有一个包含 Vue 应用程序的 client 文件夹和一个包含静态服务于 index.html 的 app.py 的 server 文件夹通过 Flask 在 client/dist 文件夹中。

static.json 的内容如指南中所述：

{
  "root": "client/dist",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}

将刚刚修改的 root 文件夹转到 client/dist。运行应用程序在本地 npm run serve 可以正常工作，在其 Heroku 页面上打开它并单击导航栏也是如此。但是，直接去一个页面，比如/translate，总是returns 404.

我安装了以下构建包：

=== readiglot Buildpack URLs
1. heroku/nodejs
2. heroku/python
3. https://github.com/heroku/heroku-buildpack-static

应用托管于此：https://www.readiglot.herokuapp.com。

在 npm run build 根目录下，dist 文件夹由 Heroku 在 client 文件夹中构建。

我错过了什么吗？有人可以建议其他配置吗？

Answer 1

答案在 app.py 文件中 - 您需要使用 catch all 路由静态提供文件。

@app.route("/", defaults={"path": ""})
@app.route("/<string:path>")
@app.route("/<path:path>")
def index(path):
    return app.send_static_file("index.html")

通过将 serve_static_file 放入 Flask 应用程序以从所有其他路由重定向，404 仅显示在真正的 404 上。

Flask 静态提供的 vue-router 应用程序在 Heroku 上显示 404 自定义页面

Statically served vue-router app by Flask shows 404 for custom pages on Heroku

heroku

flask

vue.js

vue-router