如何修复静态JS文件中Flask Jinja变量无法解析的问题

你遇到的两个问题本质同源：Flask的Jinja渲染仅作用于render_template传入的模板文件，存放在static目录下的静态资源由静态文件服务直接返回，不会经过Jinja解析。在静态JS里写的{{ 变量 }}会原样输出为带{的字符串，既拿不到后端值，还会导致JSON.parse遇到非法{字符直接抛错。
目前已有非常成熟的落地方案，完全不需要把大段JS嵌在HTML里，仅需在HTML中保留极少量的数据注入代码，业务逻辑可以全部放在静态JS文件中。

方案1：挂载全局初始化数据（最通用） #

只在HTML模板中写极短的脚本块，把所有前端需要用到的后端变量统一挂载到window对象上，后续静态JS直接读取全局值即可。

HTML模板代码 #

<!-- 仅做数据注入，不写业务逻辑 -->
<script>
window.__INITIAL_DATA__ = {
  currentUserId: {{ current_user.id|tojson }},
  currentUsername: {{ current_user.username|tojson }},
  apiBase: {{ config.API_BASE|tojson }},
  permissionList: {{ user_permissions|tojson }}
};
</script>
<!-- 引入纯静态JS文件，内部不写任何Jinja语法 -->
<script src="{{ url_for('static', filename='js/business.js') }}"></script>

静态JS（static/js/business.js）代码 #

// 直接读取注入的全局数据使用
const { currentUserId, currentUsername, apiBase, permissionList } = window.__INITIAL_DATA__;

// 后续所有业务逻辑正常编写即可
console.log('当前用户ID：', currentUserId);

注意：所有传给JS的Jinja变量必须加|tojson过滤器，它会自动处理特殊字符转义、引号包裹，输出合法的JS字面量，从根源避免语法错误和XSS风险。

方案2：使用DOM的data属性传值（适合轻量场景） #

如果需要传递的变量很少，可以直接把值挂在DOM节点的data-*自定义属性上，静态JS读取DOM属性即可。

HTML模板代码 #

<!-- 在根节点挂载需要的参数 -->
<div id="app-root"
     data-user-id="{{ current_user.id|tojson }}"
     data-user-role="{{ current_user.role|tojson }}">
</div>
<script src="{{ url_for('static', filename='js/business.js') }}"></script>

静态JS代码 #

const root = document.getElementById('app-root');
const userId = root.dataset.userId;
const userRole = root.dataset.userRole;
// 如果是复杂结构数据，读取后用JSON.parse解析即可，不会出现格式报错

方案3：动态渲染JS路由（适合需要动态生成JS逻辑的场景） #

如果确实有部分JS逻辑需要Jinja动态生成，可以单独写一个返回JS内容的路由，不要把这类JS放在static目录下。

后端路由代码 #

@app.route('/assets/dynamic-config.js')
def render_dynamic_js():
    template_data = {
        "api_base": config.API_BASE,
        "static_version": config.STATIC_VERSION
    }
    # 返回JS类型的响应，走Jinja渲染
    return render_template('dynamic-config.js', **template_data), 200, {
        "Content-Type": "application/javascript"
    }

HTML引入方式 #

<!-- 引入走Jinja渲染的动态JS -->
<script src="{{ url_for('render_dynamic_js') }}"></script>
<!-- 后续引入普通静态JS -->
<script src="{{ url_for('static', filename='js/business.js') }}"></script>

这种方案只适合需要动态生成JS逻辑的特殊场景，普通传值场景用前两种方案性能更好、维护性更高。

• 绝对不要在static目录下的静态JS文件中写{{ }}、{% %}这类Jinja语法，这类文件不会走Jinja渲染，写了只会原样输出，直接触发你遇到的Unexpected token {类语法错误。
• 不要为了传值把成百上千行的JS业务代码全嵌在HTML里，只需要把数据注入的几行代码放在HTML中，业务逻辑全拆到静态JS里，结构完全清晰，不存在不优雅的问题。
• 所有从Jinja输出到JS的变量都要加|tojson过滤器，不要手动拼JSON字符串，很容易出现转义错误。

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