Django static目录下JS函数导入后失效问题求助

问题描述 #

在Django项目拆分JS代码时，使用ES6模块语法导入函数后，所有JS代码完全停止运行。相关文件及目录结构如下：

目录结构：

static> 
       shop>
             assets>
                     js>
                         cart_methods.js
                         home_script.js

cart_methods.js

export function cartFunction() {
    console.log("work");
}

home_script.js

import { cartFunction } from './cart_methods.js';
cartFunction();

核心原因及解决步骤 #

1. 必须声明脚本为模块类型 #

浏览器默认不会将普通<script>标签识别为ES6模块，所以在Django模板中引入home_script.js时，必须添加type="module"属性：

<script type="module" src="{% static 'shop/assets/js/home_script.js' %}"></script>

这是最关键的一步，没有这个属性，浏览器会直接报错并终止脚本执行。

2. 验证静态文件路径正确性 #

确保Django的static模板标签生成的路径正确，可以在浏览器中查看页面源码，检查src属性对应的URL是否能正常访问到home_script.js和cart_methods.js文件。

3. 检查浏览器控制台错误信息 #

按F12打开开发者工具，查看控制台的具体错误：

• 如果提示"Failed to fetch module script"：说明文件路径错误，修正导入路径或static标签的路径配置
• 如果提示"Unexpected token 'import'"：说明没加type="module"属性，回到第一步修正

4. 本地开发注意事项 #

使用Django自带的runserver时，静态文件服务默认是正常的，但如果自定义了静态文件存储配置，要确保JS文件的访问权限和路径映射正确。不要直接打开本地HTML文件（绕过Django服务），否则会触发跨域问题导致模块无法加载。

内容的提问来源于stack exchange，提问作者Copy-Ninja