如何使用 Flask 在 html 中导入 javascript 文件答案

【问题标题】：How to import javascript files in html with Flask如何使用 Flask 在 html 中导入 javascript 文件
【发布时间】：2021-05-28 19:29:32
【问题描述】：

我有一个带有 javascript 部分的 Html 页面，其中包含一些其他 .js 文件：

<script type="module">

            import * as THREE from "../build/three.module.js";

            import { OrbitControls } from './jsm/controls/OrbitControls.js';
            import { STLExporter } from './jsm/exporters/STLExporter.js';
            import { STLLoader } from './jsm/loaders/STLLoader.js';
            import { GUI } from './jsm/libs/dat.gui.module.js';
            
            ...

当我在浏览器中打开我的 html 页面时，它会显示我想要的内容。

当我想使用 Flask 在本地服务器上运行这个 html 页面时，就会出现问题。
如果我不修改导入，它将不起作用： It doesn't find the files 所以我尝试创建一个静态存储库，在其中放置 jsm 存储库并像这样使用 url_for() ：

<script type="module">

            import * as THREE from "../build/three.module.js";
            import { OrbitControls } from "{{ url_for('static',filename='jsm/controls/OrbitControls.js') }}";
            import { STLExporter } from "{{ url_for('static',filename='jsm/exporters/STLExporter.js') }}";
            import { STLLoader } from "{{ url_for('static',filename='jsm/loaders/STLLoader.js') }}";
            import { GUI } from "{{ url_for('static',filename='jsm/libs/dat.gui.module.js') }}";

它似乎适用于静态文件：It finds static files
然而，它不适用于构建存储库中的 three.module.js 文件。
我什至尝试将其放入静态存储库或使用 url_for() 进行此导入...
但我尝试的所有方法似乎都不起作用。

有人可以知道如何导入这个对threejs有用的模块吗？

非常感谢

【问题讨论】：

标签： javascript python html flask three.js

【解决方案1】：

将三个.module.js移动到static/jsm文件夹中，导入如下：

<script type="text/javascript" src="{{ url_for('static',filename='js/three.module.js') }}"></script>

【讨论】：

是的，build文件夹和static文件夹是同级的。但问题似乎不是路径，因为我试图将整个路径放在 D:/.../build/three.module.js 中，但它也不起作用。
尝试将其移入静态目录并按以下方式导入：<script type="module" src="{{ url_for('static',filename='jsm/three.module.js') }}"></script>
或者如果浏览器返回错误：加载模块脚本失败：需要一个 JavaScript 模块脚本，但服务器响应的 MIME 类型为“text/plain”，请尝试与：<script type="text/javascript" src="{{ url_for('static',filename='js/three.module.js') }}"></script>
我按照你的建议导入了：<script type="module" src="{{ url_for('static',filename='three.module.js') }}"></script>，它在响应顶部返回了这个：127.0.0.1 - - [28/May/2021 13:03:20] "GET /static/three.module.js HTTP/1.1" 200 -，但它也显示了这个：127.0.0.1 - - [28/May/2021 13:03:21] "GET /build/three.module.js HTTP/1.1" 404 -，但没有其他导入
您确定没有其他导入吗？因为我已经尝试过：<script type="text/javascript" src="{{ url_for('static',filename='js/three.module.js') }}"></script> 并且它似乎正确导入了它。您也可以尝试清除浏览器缓存。