如何在Plotly Dash中显式设置HTML头部的base标签？

要在Plotly Dash应用中显式添加<base>标签到HTML的<head>区域，最直接的方式是自定义Dash的index模板字符串，Dash允许通过app.index_string属性覆盖默认的HTML模板，同时保留Dash所需的核心资源注入点。

实现代码 #

import dash
from dash import html

# 初始化Dash应用
app = dash.Dash(__name__)

# 自定义HTML模板，插入<base>标签
app.index_string = '''
<!DOCTYPE html>
<html>
    <head>
        <base href="/my/base/url">
        {%metas%}
        {%title%}
        {%favicon%}
        {%css%}
    </head>
    <body>
        {%app_entry%}
        <footer>
            {%config%}
            {%scripts%}
            {%renderer%}
        </footer>
    </body>
</html>
'''

# 定义应用布局
app.layout = html.Div('Dash应用内容')

if __name__ == '__main__':
    app.run_server(debug=True)

关键说明 #

• 模板中的{%metas%}、{%css%}、{%scripts%}等占位符是Dash自动填充的核心内容（比如元标签、样式表、脚本文件），必须保留以保证应用正常运行。
• 你可以根据需求动态修改<base>标签的href值，比如从环境变量或配置文件中读取路径后替换模板字符串中的对应部分。
• 运行应用后，查看页面源代码，就能看到符合要求的HTML结构：<head>内包含指定的<base>标签，<body>区域加载Dash的组件内容。

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