如何移除Flask-Angular应用URL中的static关键字？

1. 修改Flask应用初始化配置 #

在web_app.py里，给Flask实例添加static_url_path=''参数，让静态文件的访问前缀从/static改为根路径/：

app = Flask(__name__, static_folder='static', template_folder='static', static_url_path='')

2. 调整Angular编译命令的base-href参数 #

把原编译命令的--base-href值从""改为"/"，确保Angular路由基于根路径生成：

ng build --configuration production --base-href "/"

这一步能让Angular生成的页面路由链接直接是/dashboard这类格式，不会带上static前缀。

3. 添加Flask通配路由处理SPA刷新问题 #

Angular是单页应用，用户直接访问/dashboard并刷新时，Flask会默认找不到对应路由，所以要加一个通配路由，把所有非API请求转发到index.html：

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

注意：请把Flask的API路由定义在这个通配路由之前，避免API请求被错误转发到前端页面。

4. 验证编译与启动 #

重新执行Angular编译命令，确认编译文件正确生成到Flask的static文件夹后，启动Flask应用。此时访问http://localhost:5000/dashboard就能正常打开页面，URL中不再包含static关键字。

内容的提问来源于stack exchange，提问作者Sam