Ale*_*oca 5 python plotly plotly-dash
使用Dash 0.22.0和Python 2.7.12。Plotly 是 3.1.0,但未在以下示例中使用。
我正在尝试创建一个应该完全脱机工作的最小应用程序。
而不是从远程加载的dash_html_components/bundle.js,dash_renderer/bundle.js,react.min.js和react-dom.min.js,我把自己的本地副本在/assets/js。我想告诉 Dash 只使用这些文件的本地副本。
我阅读了资产文件和索引自定义#286,如果我理解得很好,下面的例子应该可以工作:
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
# default values
app.config.assets_folder = 'assets' # The path to the assets folder.
app.config.include_asset_files = True # Include the files in the asset folder
app.config.assets_external_path = "" # The external prefix if serve_locally == False
app.config.assets_url_path = '/assets' # the local url prefix ie `/assets/*.js`
app.layout = html.Div(
[html.H1("this is a test")]
)
if __name__ == '__main__':
app.run_server(debug=True)
Run Code Online (Sandbox Code Playgroud)
HTML 源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Dash</title>
<link rel="stylesheet" href="/assets/css/materialize.css">
<link rel="stylesheet" href="/assets/css/materialize.min.css">
<link rel="stylesheet" href="/assets/material-icons/material-icons.css">
</head>
<body>
<div id="react-entry-point">
<div class="_dash-loading">
Loading...
</div>
</div>
<footer>
<script id="_dash-config" type="application/json"<{"requests_pathname_prefix": "/", "url_base_pathname": "/"}</script>
<script src="https://unpkg.com/react@15.4.2/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/dash-html-components@0.11.0/dash_html_components/bundle.js"></script>
<script src="/assets/js/dash_html_components_0.11.0/bundle.js"></script>
<script src="/assets/js/react_15.4.2/react-dom.min.js"></script>
<script src="/assets/js/react_15.4.2/react.min.js"></script>
<script src="/assets/js/dash_renderer_0.13.0/bundle.js"></script>
<script src="/assets/js/materialize_1.0.0.rc2/materialize.js"></script>
<script src="/assets/js/materialize_1.0.0.rc2/materialize.min.js"></script>
<script src="/assets/material-icons/iconjar-map.js"></script>
<script src="https://unpkg.com/dash-renderer@0.13.0/dash_renderer/bundle.js"></script>
</footer>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
如您所见,我的本地 js 文件是从 加载的/assets,但它不断从 加载相同的文件https://unpkg.com/...
有没有办法避免这种情况?
看起来我错过了一个更简单的解决方案。如果有人试图这样做,我就把它放在这里。
不包括本地副本破折号库(中dash_html_components/bundle.js,dash_renderer/bundle.js,react.min.js和react-dom.min.js中)/assets。
使用/assets仅适用于JS和CSS文件不相关的短跑和反应。就我而言materialize.js,iconjar-map.js以及它们各自的 CSS。
改为添加:
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
Run Code Online (Sandbox Code Playgroud)
会做的伎俩。
代码现在是:
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
# default values
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
app.config.assets_folder = 'assets' # The path to the assets folder.
app.config.include_asset_files = True # Include the files in the asset folder
app.config.assets_external_path = "" # The external prefix if serve_locally == False
app.config.assets_url_path = '/assets' # the local url prefix ie `/assets/*.js`
app.layout = html.Div(
[ html.H1("This is a test")]
)
if __name__ == '__main__':
app.run_server(debug=True)
Run Code Online (Sandbox Code Playgroud)
以及由此产生的 html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Dash</title>
<link rel="stylesheet" href="/assets/css/materialize.min.css">
<link rel="stylesheet" href="/assets/material-icons/material-icons.css">
</head>
<body>
<div id="react-entry-point">
<div class="_dash-loading">
Loading...
</div>
</div>
<footer>
<script id="_dash-config" type="application/json">{"requests_pathname_prefix": "/", "url_base_pathname": "/"}</script>
<script src="/_dash-component-suites/dash_renderer/react@15.4.2.min.js?v=0.13.0"></script>
<script src="/_dash-component-suites/dash_renderer/react-dom@15.4.2.min.js?v=0.13.0"></script>
<script src="/_dash-component-suites/dash_html_components/bundle.js?v=0.11.0"></script>
<script src="/assets/js/materialize_1.0.0.rc2/materialize.min.js"></script>
<script src="/assets/material-icons/iconjar-map.js"></script>
<script src="/_dash-component-suites/dash_renderer/bundle.js?v=0.13.0"></script>
</footer>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)