在Jupyter Lab中启动代理Plotly-Dash应用时出现404错误

问题核心 #

在Jupyter Lab环境启动Dash应用后，核心组件及依赖资源均报“文件未找到”错误，无法从本地加载所需资源，需要通过Dash初始化参数指定本地依赖路径，让应用能正确映射到资源目录。

原因分析 #

1. Dash默认优先从CDN拉取资源，若网络受限或Jupyter Lab的路由拦截了外部请求，会导致加载失败；
2. 原生Dash的静态资源路径与Jupyter Lab的服务器上下文不兼容，默认的资源映射路径未被Jupyter Lab正确解析；
3. 未明确指定本地资源目录时，Dash无法找到自定义或本地存放的依赖文件。

解决方案 #

1. 优先使用适配Jupyter的JupyterDash类 #

直接用jupyter-dash库提供的JupyterDash替代原生dash.Dash，该类已针对Jupyter环境做了路由适配，能自动处理资源路径问题：

from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html

# 初始化时开启本地加载，并指定自定义资源目录
app = JupyterDash(__name__, 
                  serve_locally=True,  # 强制加载本地依赖，而非CDN
                  assets_folder='./my_local_dependencies',  # 本地依赖存放目录
                  assets_url_path='/dash_deps')  # 对应URL中的路径

app.layout = html.Div([
    dcc.Graph(figure={'data': [{'x': [1,2,3], 'y': [4,5,6]}]})
])

# 以inline模式启动，直接嵌入Jupyter Lab
app.run_server(mode='inline')

2. 原生Dash的参数配置 #

若必须使用原生dash.Dash，需手动设置资源路径与路由前缀：

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__,
                serve_locally=True,
                assets_folder='./local_assets',  # 本地资源文件夹路径（相对或绝对路径）
                assets_url_path='/dash_assets',  # 应用URL中对应的资源路径
                routes_pathname_prefix='/lab/dash/')  # 适配Jupyter Lab的路由前缀

app.layout = html.Div([
    html.H1("测试本地依赖加载"),
    dcc.Dropdown(options=[{'label': 'A', 'value': 'A'}])
])

if __name__ == '__main__':
    app.run_server(port=8050)

3. 手动指定核心组件依赖路径 #

若核心组件的依赖仍无法加载，可直接通过external_scripts和external_stylesheets指向本地文件：

app = JupyterDash(__name__,
                  external_stylesheets=['./local_assets/dash_core_components.min.css'],
                  external_scripts=['./local_assets/dash_core_components.min.js'])

验证步骤 #

1. 启动应用后，打开浏览器开发者工具（F12），切换到“网络”标签；
2. 刷新页面，检查所有css/js资源的请求状态，确认没有404错误；
3. 查看资源请求路径是否与你设置的assets_url_path一致。

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