使用 Laravel 翻译加载器在 JavaScript 中使用 Laravel 翻译

您是否曾经想过在前端代码中使用与后端相同的 Laravel 翻译？

Laravel 翻译加载器 是一个 webpack 加载器，它使您能够将 Laravel 翻译加载到您的 JavaScript 包中。

该包不会执行 HTTP 请求来获取翻译，而是参与资产编译过程，并将您的 PHP 翻译文件（JSON 和 PHP）转换为 JSON 对象，以便您根据需要使用它。

它与 vue-i18n 等包开箱即用，或者可以对流行的 i18next 包进行一些配置调整。

#显示代码

第一步是使用 NPM 或 Yarn 安装该包。

npm install @kirschbaum-development/laravel-translations-loader --save
yarn add @kirschbaum-development/laravel-translations-loader --save

或者，使用 Yarn。

npm install @kirschbaum-development/laravel-translations-loader --save

基本上，在您的 JavaScript 文件中，您只需要包含以下代码行来导入您的语言包。

import languageBundle from
'@kirschbaum-development/laravel-translations-loader!@kirschbaum-development/laravel-translations-loader';

这将加载并解析所有您的语言文件，包括 PHP 和 JSON 翻译。languageBundle 将类似于以下内容

{
    "en": {
        "auth": {
            "failed": "These credentials do not match our records."
        }
    },
    "es": {
        "auth": {
            "failed": "Estas credenciales no coinciden con nuestros registros."
        }
    }
}

以及您翻译文件夹中的所有其他翻译。

您可以选择仅加载 PHP 或 JSON 翻译文件，也可以在语言键和某些包所需的实际翻译之间添加命名空间。您可以在项目的 自述文件 上查看不同的加载选项。如果您遇到任何问题或有任何建议，请提交 问题。

#使用 vue-i18n 的示例

请注意，您可以直接将 languageBundle 对象作为参数传递给 VueI18n 构造函数。

import languageBundle from '@kirschbaum-development/laravel-translations-loader!@kirschbaum-development/laravel-translations-loader';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const i18n = new VueI18n({
    locale: window.Locale,
    messages: languageBundle,
})

在任何 vue 组件中，您都可以直接使用 $t 函数，如下例所示

<template>
    <span>{{ $t('auth.failed') }}</span>
    <!-- this will output the same as {{ trans('auth.failed') }} using Laravel -->
</template>