如何从Flask向外部JavaScript传递变量？

下面是几个实用的实现思路，你可以根据自身场景选择：

1. 全局变量注入（最简洁直接） #

在引入外部JS的模板HTML中，先将需要的翻译变量挂载到window全局对象上，外部JS直接读取即可：

<!-- 模板HTML中，在引入bundle.js之前添加这段代码 -->
<script>
window.i18n = {
  translate_1: "{{ translate_1 }}",
  translate_2: "{{ translate_2 }}"
  // 把所有需要用到的翻译项都在这里定义
};
</script>
<script src="/static/js/user/bundle.js"></script>

之后在bundle.js里直接调用：

console.log(i18n.translate_1);
// 或者直接写 window.i18n.translate_1

优点：无需额外路由或配置，适合翻译项较少的场景；缺点：若翻译项过多，模板中的代码会显得冗长。

2. 将JS文件作为Flask模板渲染 #

把你的bundle.js重命名为Jinja2模板格式（比如bundle.js.jinja2），然后在Flask中添加一个专门渲染该JS文件的路由：

# Flask路由代码
@app.route('/static/js/user/bundle.js')
def serve_localized_js():
    # 假设你已有获取当前翻译上下文的方法，比如get_translations()
    translations = get_translations()
    # 渲染JS模板并返回正确的响应类型
    return render_template('js/user/bundle.js.jinja2', **translations), 200, {
        'Content-Type': 'application/javascript'
    }

接着在bundle.js.jinja2里直接使用模板变量：

// bundle.js.jinja2中的代码
const message = "{{ translate_1 }}";
alert(message);

优点：可以直接在JS中沿用模板语法，无需修改原有JS的变量引用逻辑；缺点：需要额外配置路由，同时要注意浏览器缓存问题（可通过给JS URL加版本号或设置缓存策略解决）。

3. AJAX异步拉取翻译字典 #

如果翻译项数量较多，或者需要支持动态切换语言，可以让外部JS通过AJAX请求获取完整的翻译字典：

# Flask新增API接口返回翻译数据
@app.route('/api/i18n')
def get_i18n_data():
    translations = get_translations()
    return jsonify(translations)

然后在bundle.js初始化时请求该接口：

// bundle.js中的代码
let i18n = {};
// 页面加载时获取翻译数据
fetch('/api/i18n')
  .then(response => response.json())
  .then(data => {
    i18n = data;
    // 现在可以正常使用i18n.translate_1
    console.log(i18n.translate_1);
  });

优点：无需在模板中定义大量变量，适合翻译项多或需要动态更新语言的场景；缺点：需要处理异步逻辑，JS中要注意等待数据加载完成后再使用翻译项。

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