vue build 后的目标文件夹部署在Flask服务器

最新推荐文章于 2024-08-05 02:50:46 发布

认真的Jorden

最新推荐文章于 2024-08-05 02:50:46 发布

阅读量899

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_39670012/article/details/118999812

本文记录了一种不常见的场景：如何将Vue构建后的目标文件夹无缝部署到Flask服务器。通过设置Flask的`template_folder`和`static_folder`参数，确保Vue项目的静态资源正确加载，无需修改Vue内部配置。示例中展示了基本的路由配置，如'/hello'和'/index'，并提供了一个404页面的处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将 vue build 后的目标文件夹部署在Flask 服务器后，完美解决，因为这个场景不常见，所以记录一下:

from flask import Flask, Blueprint, render_template, abort
from flask import jsonify
from flask_cors import CORS

# 关键是 这两个初始化参数  template_folder static_folder
# 配置好后，vue项目内的配置都不用改了
app = Flask(__name__, template_folder="./dist", static_folder="./dist/static")

#sample_page = Blueprint("sample_page", "sample_page", template_folder="./dist")
# 将前端路由控制的url访问全部交由该控制处理器相应
#@app.errorhandler(404)
#def index():
#    return render_template("index.html")

@app.route('/hello')
def hello():
    return "<h>Hello</h>"

@app.route('/index')
def index():
    return render_template("index.html")



if __name__ == "__main__":
    app.run(host="127.0.0.1", port=5057)