在 vuejs 和 Blade.php 中使用 i18n

Question

我想在blade.php 和vuejs 视图中都使用i18n。是否可以？ 我已经为 i18n 制作了 json 文件，它看起来像这样：

export default {
    "en": {
        "menu": {
             "home":"Home",
             "example":"Example"
        }
    }
}

它适用于 vuejs，但我想知道如何在 laravel 中使用它......这可能吗？

否则，有什么方法可以在 laravel 和 vuejs 中访问一个 cookie，还是我需要使用 axios 请求来存储它并在 vue 中获取它？ （我想使用 lang 存储和读取）。

这是一个 Blade.php 视图，我想在其中使用 i18n

@if (Route::has('register'))
      <li class="nav-item">
             <a class="nav-link" href="{{ route('register') }}">{{ __('home.example') }}</a>
      </li>
@endif

在 vue.js 文件中，我所做的只是 {{ $t('home.example') }}

我使用这个库：https://github.com/kazupon/vue-i18n

非常感谢！

Answer 1

我认为在 Blade 模板中使用 vue-i18n 并不容易。

Blade 模板 allow 您可以在花括号（{{ 和 }}）前使用 @ 符号来指示表达式不应由 Blade 计算。我想建议您利用它来发挥自己的优势，并在 Blade 中使用 @ {{ $t('home.example') }}。我认为它必须在您的 Vue 安装元素中，以便 Vue-i18n 拾取它。但是，Vue replaces 自 Vue 2.x 以来已安装元素，因此您的 Vue 已安装元素中的 Blade 模板可能会丢失。

我认为最好的办法是使用生成器将所有 Laravel 翻译字符串复制到 Vue-i18n。 laravel-vue-i18n-generator 看起来是一个不错的软件包。

基本上，您可以将翻译字符串存储在 Laravel 中，并且可以像往常一样在 Blade 中使用它们。每次更新这些字符串时，您都必须再次运行生成器以使它们在 Vue-i18n 中可用，您可以像往常一样使用 Vue-i18n 访问它们。