javascript - 管理 django 中 js 库中的静态链接

Question

所以我尝试为我用django开发的网站添加录音功能。

我想做类似 https://github.com/addpipe/simple-web-audio-recorder-demo 的事情所以我开始尝试不加修改地运行它。

我采用了与上面链接的 git 中相同的 html，将 js/ 文件夹放入我的 static/ 文件夹中，然后简单地更改了以下几行( index.html，第 32-33 行)

<script src="js/WebAudioRecorder.min.js"></script>
<script src="js/app.js"></script>

对于

{% load static %}
<script src={% static "js/WebAudioRecorder.min.js" %}></script>
<script src={% static "js/app.js" %}></script>

这些 js 文件加载正确，但问题是当我单击网站上的记录时，我收到 "GET/myapp/record/js/WebAudioRecorderWav.min.js HTTP/1.1"404 我的 Django 服务器出现错误。

WebAudioRecorderWav.min.js 在 WebAudioRecorder.min.js 中调用。我尝试在js文件中使用{% load static %}技巧，但它不起作用。

解决这个问题的正确方法是什么？

提前致谢。

Answer 1

您应该使用workerDir设置来设置其他导入的js文件的正确路径。可能您的记录器是在 app.js 中初始化的，您不能在其中使用 {% static %} 等模板标签。最好的方法是在加载 app.js 之前在模板中创建一个全局变量:

在 HTML 模板中:

<script>var jsFilesPath = "{% static 'js/' %}"</script>
<script src="{% static 'js/app.js' %}"></script>

在你的 app.js 中:

if (typeof jsFilesPath !== "undefined") {
    audioRecorder = new WebAudioRecorder(sourceNode, {
      workerDir: jsFilesPath     // must end with slash
    });
}