Laravel 8 Blade中使用Javascript追加翻译内容失效如何解决

问题根因 #

你写的写法不生效的核心原因是运行时机差异：

• {{ __('xxx') }} 是 Laravel Blade 的服务端语法，只会在服务器返回页面前的渲染阶段执行解析，替换成对应的翻译文本。
• JS 变量 x 是页面返回浏览器后，在客户端运行阶段才赋值的，服务器渲染 Blade 时根本获取不到这个 JS 变量的实际值，你写的 ${x} 对服务端来说只是普通字符串，自然不会按照预期翻译。

可行解决方案 #

方案1：预加载常用翻译项到前端（推荐，性能最高） #

如果需要用到的翻译key是可枚举的，直接在Blade中提前把翻译内容注入到JS全局变量里，后续客户端直接取用即可：

1. 在Blade模板的JS部分提前定义翻译映射：

// 这段代码写在.blade.php文件中，服务端渲染时会自动替换成对应翻译值
window.trans = {
    Cats: "{{ __('Cats') }}",
    Dogs: "{{ __('Dogs') }}",
    // 其他你需要用到的翻译key都可以提前加到这里
};

2. 客户端JS直接从预加载的变量中取翻译结果：

let x = 'Cats';
$('#divToAppend').text(window.trans[x]);

方案2：异步接口调用翻译 #

如果需要翻译的key无法提前枚举，可以写一个轻量的翻译接口，前端需要时动态请求：

1. 新增Laravel路由：

// routes/web.php 增加如下路由，可根据需要加权限校验
Route::get('/api/translate', function (\Illuminate\Http\Request $request) {
    // 建议加key白名单校验，避免恶意遍历语言文件
    $allowKeys = ['Cats', 'Dogs', 'OtherAllowedKey'];
    $key = $request->input('key');
    if (!in_array($key, $allowKeys)) {
        return response()->json(['translated' => $key], 400);
    }
    return response()->json(['translated' => __($key)]);
});

2. 前端JS调用接口获取翻译结果：

let x = 'Cats';
fetch('/api/translate?key=' + encodeURIComponent(x))
    .then(res => res.json())
    .then(data => {
        $('#divToAppend').text(data.translated);
    });

方案3：导出语言包到前端 #

如果需要全量翻译能力，可以把Laravel的语言文件导出为JSON格式，前端加载后自行实现翻译逻辑，适合多语言场景下大量翻译需求的情况，不用频繁发接口。

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