どのようにJSファイル(Vue)ファイルでララベル翻訳を使用するには?

このトピックに関するいくつかの研究の後、私は、既存の解決策のどれも私のニーズを満たすとわかりませんでした.それらのほとんどは、JS資産の再コンパイルを必要としたり、新しい翻訳を編集したり追加したりした後に、いくつかのコマンドを実行したりしています.多分いくつかの解決策があるかもしれませんが、私はララブノヴァで必要なものを見たことを覚えています.
そこでララヴィル・ノヴァのソースをチェックし、ラーラベル翻訳を翻訳ファイルからJSONとしてロードし、それからブレードテンプレートに渡した.ブレードではグローバル設定変数への単純な代入であった.
その解決策の問題は、JSON翻訳だけでなく、ララヴァもPHPフレーズをサポートしていたことでした.
いくつかのGooglingの後、私は著者がPHP言語フレーズをJSに読み込む方法を示したarticleを見つけました.
私はLaravel Novaのソースと上記の記事から両方のアプローチを混合しました、そして、最後に、私は、私が最も簡単な方法はJSファイルにラーラヴ翻訳ストリングを使用すると思いました.
まず、翻訳サービスプロバイダを作成します.

<?php

namespace App\Providers;

use Illuminate\Support\Facades\App;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Cache;
use Illuminate\Support\ServiceProvider;

class TranslationServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap the application services.
     *
     * @return void
     */
    public function boot()
    {
        Cache::rememberForever('translations', function () {
            $translations = collect();

            foreach (['en', 'kg', 'ru'] as $locale) { // suported locales
                $translations[$locale] = [
                    'php' => $this->phpTranslations($locale),
                    'json' => $this->jsonTranslations($locale),
                ];
            }

            return $translations;
        });
    }

    private function phpTranslations($locale)
    {
        $path = resource_path("lang/$locale");

        return collect(File::allFiles($path))->flatMap(function ($file) use ($locale) {
            $key = ($translation = $file->getBasename('.php'));

            return [$key => trans($translation, [], $locale)];
        });
    }

    private function jsonTranslations($locale)
    {
        $path = resource_path("lang/$locale.json");

        if (is_string($path) && is_readable($path)) {
            return json_decode(file_get_contents($path), true);
        }

        return [];
    }
}

ファイルをconfig/app.phpに登録します.

'providers' => [
    // your other providers
    App\Providers\TranslationServiceProvider::class,
],

次に、文字列のJSに翻訳文字列を渡す必要があります.私は、デフォルトlayouts/app.blade.phpファイルでそれをしました:

<script>
    window._locale = '{{ app()->getLocale() }}';
    window._translations = {!! cache('translations') !!};
</script>

今、あなたは翻訳を取得し、置換を適用するいくつかのJS関数が必要です.そのためにはtrans.jsファイルを作りました.

module.exports = {
    methods: {
        /**
         * Translate the given key.
         */
        __(key, replace) {
            let translation, translationNotFound = true

            try {
                translation = key.split('.').reduce((t, i) => t[i] || null, window._translations[window._locale].php)

                if (translation) {
                    translationNotFound = false
                }
            } catch (e) {
                translation = key
            }

            if (translationNotFound) {
                translation = window._translations[window._locale]['json'][key]
                    ? window._translations[window._locale]['json'][key]
                    : key
            }

            _.forEach(replace, (value, key) => {
                translation = translation.replace(':' + key, value)
            })

            return translation
        }
    },
}

これは、PHPの翻訳をロードするラーヴァベルノヴァからbase.jsのビット修正版です.要するに、論理は次のようになります.最初にPHPトランスレーションの翻訳文字列を見つけようとしていない場合は、JSON翻訳で検索してください.翻訳が全く見つからなかったならば、それはキー自体を示します.
最後のステップはmixinとしてメソッドを含めることです.

Vue.mixin(require('./trans'))

それです.このようにvueコンポーネントで翻訳を使うことができます.

<template>
<div class="card">
    <div class="card-header">{{ __('Example Component') }}</div>

    <div class="card-body">
        {{ __("I'm an example component.") }}
    </div>
</div>
</template>

<script>
export default {
    mounted() {
        console.log(this.__('Component mounted.'))
    }
}
</script>

このソリューションを使用すると、新しい翻訳を編集/追加した後に行う必要がある唯一のことは、cache:clearアーティシャンコマンドを実行することです.Laravel Nova(我々が我々のプロジェクトで使用する)はパッケージを持ちます.そして、それは管理者パネルから右のそのようなコマンドを実行するのを許します.
更新25.02.2020
前の解決策は単一のロケールだけでうまく動作していました.ありがとう
指摘する.今、ソリューションは、アプリケーションで指定されたすべてのロケールをカバーしています.