如何完全离线使用 Plotly/Dash (Python)?

Ale*_*oca 5 python plotly plotly-dash

使用Dash 0.22.0Python 2.7.12。Plotly 是 3.1.0,但未在以下示例中使用。

我正在尝试创建一个应该完全脱机工作的最小应用程序。

而不是从远程加载的dash_html_components/bundle.jsdash_renderer/bundle.jsreact.min.jsreact-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/...

有没有办法避免这种情况?

Ale*_*oca 5

看起来我错过了一个更简单的解决方案。如果有人试图这样做,我就把它放在这里。

不包括本地副本破折号库(中dash_html_components/bundle.jsdash_renderer/bundle.jsreact.min.jsreact-dom.min.js中)/assets

使用/assets仅适用于JS和CSS文件不相关的短跑和反应。就我而言materialize.jsiconjar-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)