是否可以在vue js中内部使用symfony翻译？

我有Symfony 4.4应用程序，可在不同语言上进行本地化

翻译/*.yml

例如在

translations/messages.en.yml

site:
    name: My site

所以在我的小树枝模板中，我可以使用

{{ 'site.name'|trans }}

我开始在前面使用Vue js（带有WebBack和Symfony Encore）。 我知道Vue js有自己的JSON格式国际化。 但我不想重复我的翻译两次

问题
是否可以在Vue JS中以某种方式使用Symfony翻译？ 像这样的事

<template>
    <h2>My Vue template</h2>
    {{ 'site.name|trans }}
</template>

Vue模板

<template>
    <h2>My Vue template</h2>
    {{ x }}
</template>

我的Vue模板
{{x}

---

感谢您的建议

将Symfony翻译成JS有点棘手。从理论上讲，您可以将目录作为模板变量，然后将其分配给JS变量，但如果目录较大，则会产生相当大的开销，此外，您还将公开翻译标签，这可能会泄漏有关变量的不必要信息，但对于较小的项目，我发现这是最简单的解决方案：

#控制器
公共功能索引（TranslatorInterface$translator）
{
返回$this->render（'index.html.twig'[
“翻译目录”=>$translator->getcatalog（$locale），
]);
}

方法

getCatalog（）

不是接口的一部分，而是由Symfony的转换器提供的。您可能需要为IDE添加类型提示才能识别它

# twig-template
{% block javascripts %}
    <script type="text/javascript">
        const translations = {{ translation_catalog|json_encode }}
    </script>
    {{ parent() }}
{% endblock %}

#细枝模板
{%block javascripts%}
const translations={{translation_catalog}json_encode}
{{parent（）}}
{%endblock%}

{{translations | json_encode}}

将获取您的目录并将其转换为json对象。然后，您应该能够通过访问此对象来访问vue中的翻译

另一个解决方案可能是，创建一个API端点，为您提供密钥的翻译。我发现这不太理想，因为您将执行大量对翻译的HTTP请求，这对性能不好，而且您仍然有在每次API调用中暴露翻译标签的缺点。我强烈反对这种做法

更好的解决方案是让您的翻译采用Symfony的翻译组件和JS/vue都能理解的格式。然后您可以简单地重用翻译文件

---

在现代Symfony（4.2+）中，这应该更容易，因为翻译器支持，JS libs也支持这种功能，例如（可能有这个库的vue集成，但我不熟悉，所以我不能推荐任何）。这允许您直接在JS中导入翻译文件，绕过Symfony应用程序，但仍然使用与Symfony相同的文件。然后，您的构建工具可以仅用于在JS代码中保留您实际需要的密钥，或者为每种语言生成静态文件，而不依赖原始的静态翻译文件。

好的，我们已经完成了这项工作。但正如@dbrumann所说的，这确实很棘手，但它是有效的

创建一个路由/控制器，通过

getcatalog

将翻译转储到json中

在vue中，将此控制器的json响应存储到。仅当会话存储变量不存在时发出此请求

钩住vue i18n以从本地存储变量获取翻译

利润

不过，有一些警告，您需要以某种方式加以解决：

更新翻译。如果您仅在会话存储变量不存在时请求它们，则它们不会得到更新。因此，应用某种生存期或版本控制机制

翻译键+翻译域。您需要在转储控制器中将这些转换为类似于

domain.flatten.translation.key

---

但这比在每个响应中将它们包含在js变量中更有效。

谢谢您的回答@dbrumann！好主意，真的很好用。但我有100多个控制器。。现在我正在考虑在controller中生成完整的HTML（来自twig），并使用Vue获得它。类似于`公共函数索引（TranslatorInterface$translator）{return$this->render（'section.html.twig'）；}`并使用Vue js获取它。我不知道这对vue来说是不是真的很糟糕。在这种情况下，vue甚至不应该知道语言环境。你怎么认为？

# twig-template
{% block javascripts %}
    <script type="text/javascript">
        const translations = {{ translation_catalog|json_encode }}
    </script>
    {{ parent() }}
{% endblock %}