Django静态文件中JS变量导入导出失败问题求助

核心问题：路径解析错误 #

你遇到的Uncaught SyntaxError: Unexpected token 'export'，大概率是因为B.js里的相对路径是基于当前页面URL解析，而非静态文件的实际目录结构。比如页面URL是http://localhost:8000/时，import './A.js'会请求http://localhost:8000/A.js，但你的A.js实际在/static/js/A.js，路径不匹配导致浏览器加载的内容不对，进而解析失败。

具体修复步骤 #

1. 修正B.js的导入路径 #

直接使用基于网站根目录的绝对路径，适配Django默认的静态文件前缀：

// B.js
import {variable} from '/static/js/A.js'

如果你的STATIC_URL不是默认的/static/，替换成对应前缀即可。

2. 优化模板中的脚本加载 #

不需要同时加载A.js和B.js作为模块——B.js已经通过导入依赖了A.js，只需要加载B.js：

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

3. 让模块变量能在全局使用（可选） #

ES模块的变量默认处于模块作用域，无法直接在普通脚本中访问。如果需要在模板的其他非模块脚本里使用该变量，要把它挂载到window对象：

// B.js
import {variable} from '/static/js/A.js';
window.variable = variable;

之后就能在普通脚本中直接调用：

<script>
console.log(variable); // 输出Hello, World
</script>

4. 验证静态文件配置 #

确保Django的settings.py配置正确：

STATIC_URL = '/static/'
# 开发环境需保持DEBUG=True，Django会自动托管静态文件
# 生产环境要执行`python manage.py collectstatic`，将静态文件同步到STATIC_ROOT目录

内容的提问来源于stack exchange，提问作者optimus