带有Flask服务器的Vue.js ...将URL直接输入浏览器不会使用vue.js进行渲染。

Question

我有带烧瓶服务器后端代码的vue.js客户端代码。如果单击浏览器应用程序中的各种链接，则这些链接会从后端获取（使​​用axios）数据，并正确渲染数据，例如，如果我有到http://localhost:5000/books的路由器链接。但是，如果我直接在浏览器地址栏中输入相同的URL，则会从服务器获取原始json（即，它不会通过vue.js呈现在我的html表中）。我在router.js文件中使用模式：“ history”。

我已经浏览了关于SO的其他相关查询，但是仍然无法准确地知道我需要做些什么来完成这项工作（他们似乎都建议我使用历史记录模式。在其他情况下，他们说我需要配置flask以处理此类请求..，但请不要明确说明我需要做些什么来处理此类请求。有人对此有清楚的主意吗？

Router.js File
==============================
export default new Router({
  routes: [
    { path: "/",        name: "home",   component: Home  },
    { path: "/about",   name: "about",  component: About },
    { path: "/ping",    name: "Ping",   component: Ping  },
    { path: "/books",   name: "Books",  component: Books },

    { path: "/*", name: "NotFound", component: NotFound } /*Catch All*/ 
  ],
  mode: "history"
});

以下是我的烧瓶应用程序的摘录。

Flask App.py
============
from flask import Flask, jsonify, request, send_from_directory, render_template
from flask_cors import CORS

# instantiate the app
app = Flask(__name__, static_url_path='', static_folder='static')
app.config.from_object(__name__)
CORS(app)
...
...
@app.route('/books', methods=['GET'])
def GetAllBooks():
... 
... 
@app.route('/')
@app.route('/index.html')
def index():
    return app.send_static_file('index.html')

@app.route('/<path:path>')
def static_file(path):
    return app.send_static_file(path)

if __name__ == '__main__':
    app.run()

下面是我单击“书籍”链接时显示的表格。

如果我直接在地址栏中输入网址，则下面是返回的数据。

Answer 1

我遇到了同样的问题，并用Flask catch-all rules解决了。 Flask将捕获URL /books，然后将其传递给Vue应用程序。由于您已在Vue中激活mode: "history"，因此将呈现组件Books。

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')               # url /books will fail into here
def index(page):
    return app.send_static_file('index.html')

@app.route('/static/<path:path>')
def static_file(path):
    return app.send_static_file(path)

Answer 2

就我而言，我使用它。欲了解更多check this

foo()

现在，URL localhost：5000 / about将被重定向到index.html，而vue-router将在其内部进行处理。