主页 / 问题 / 1099508
Accepted
Total Pusher
Asked:2020-03-25 16:25:40 +0800 CST2020-03-25 16:25:40 +0800 CST

在 Laravel 中本地化 VueJS 组件

  • 772

Laravel 有一个像这样工作的本地化包（PHP）：

echo __('I love programming.');

以及如何做同样的事情，但对于基于 VueJS 构建的组件？我使用标准的盒装解决方案 - Laravel MIX。

我想要这样的东西：

<template>
    <div class="alert alert-danger alert-dismissible">
        <button type="button" class="close" aria-hidden="true" title="{% RELOAD %}" @click="$emit('reload')"><i class="fas fa-sync"></i></button>
        <h5 v-if="title"><i class="icon fas fa-ban"></i> {{ title }}</h5>
        {{ message }}
    </div>
</template>

<script>
    export default {
        props: ["title", "message"]
    }
</script>

在这里，{% RELOAD %}我放置了替换文本，它应该从本地化文件中提取。

UPD{{ title }}和{{ message }}都是取自属性，不需要翻译。

laravel

2 个回答

  1. Best Answer

    在medium.com上找到了答案

    将带有翻译的 JSON 对象传递给浏览器

    添加到文件中routes/web.php：

    // Localization
Route::get('/js/lang.js', function () {
    $strings = Cache::rememberForever('lang.js', function () {
        $lang = config('app.locale');

        $files   = glob(resource_path('lang/' . $lang . '/*.php'));
        $strings = [];

        foreach ($files as $file) {
            $name           = basename($file, '.php');
            $strings[$name] = require $file;
        }

        return $strings;
    });

    header('Content-Type: text/javascript');
    echo('window.i18n = ' . json_encode($strings) . ';');
    exit();
})->name('assets.lang');

    因此，根据语言设置，将选择所有必要的文件并生成 JSON 对象。它将通过 route 提供js/lang.js。

    然后你需要在页面模板中包含这个脚本：

    <script src="/js/lang.js"></script>

    因此，可以接收翻译：

    console.log(i18n.auth.email);

    或通过助手：

    // script.js
const _ = import('lodash');
window.trans = (string) => _.get(window.i18n, string);

    Vue.js

    现在我们需要在 VueJS 中导入一个新方法：

    // App.vue
const _ = import('lodash');
Vue.prototype.trans = string => _.get(window.i18n, string);

    因此，在模板（.vue文件）中，我们现在可以使用与 Blade 中相同的语法！

    // LoginForm.vue
<template>
    <label for="email">{{ trans('auth.email') }}</label>
</template>
    • 2

  2. 创建一个带有翻译的表（一个带有翻译的文件），将其放在 Store 中，然后过滤翻译所需的内容（在 admin.js 中全局定义过滤器）：

    Vue.filter('trans', function (value) {
    for (var key in store.state.russian) {
        if (value === key) {
            value = store.state.russian[key]
        }
    }
    return value
})

    店铺：

    export  default {
        state:{
            russian: {
                "menu": "Меню"
            }
        }
    }

{{ menu | trans() }} // получим Меню
    • 1

相关问题