时间戳

首页 > 解决方案 > 是否可以在 vue js 内部使用 symfony 翻译？

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

问题描述

我有 Symfony 4.4 应用程序，具有不同语言的本地化translations/*.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>

Question2x是否可以在 vue 模板 中使用变量？


    /**
     * @Route("", name="homepage")
     *
     * @return Response
     */
    function homepage()
    {
        return $this->render(
            'index.html.twig', [
                'x' => 'test',
            ]
        );
    }

Vue 模板

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

感谢任何建议

标签： symfonyvue.jstemplateslocalizationtranslation

解决方案

好吧，我们已经做到了。但正如@dbrumann 所说，这真的很棘手，但它确实有效。

  1. 创建一个路由/控制器，您可以在其中将翻译转储getCatalogue到 json
  2. 在 vue 中，将这个控制器的 json 响应存储到session storage中。仅当会话存储变量不存在时才发出此请求。
  3. 挂钩到 vue i18n 以从本地存储变量中获取翻译
  4. 利润

但是有一些警告，您需要以某种方式解决：

  1. 更新翻译。如果您仅在会话存储变量不存在时请求它们，则它们不会得到更新。所以，应用某种生命周期或版本控制机制。
  2. 翻译键+翻译域。你需要在倾倒控制器中将这些转换成类似的东西domain.flattened.translation.key

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

推荐阅读