在 Vue 裡使用 Laravel Localization

我的開發環境

// package.json
"laravel-mix": "^6.0.6",
"vue": "^2.6.14",
// composer.json
"laravel/framework": "^8.65",
"mariuzzo/laravel-js-localization": "^1.9",

Vue 的 Laravel 本地化包

Laravel-JS-Localization

laravel-localization-to-vue

laravel-vue-i18n-generator(已停止維護)

此次範例使用Laravel-JS-Localization

安裝

composer

composer require mariuzzo/laravel-js-localization

生成 messages.js

Laravel-JS-Localization 包提供了一個命令，可以生成所有消息的 JavaScript 版本，這些消息位於：app/lang (Laravel 4) 或 resources/lang (Laravel 5) 目錄。 生成的 JavaScript 文件將包含您的所有消息以及 Lang.js（一個受 Laravel 的 Translator 類高度啟發的精簡庫）。

生成 JS 消息

php artisan lang:js

自定義生成位置

php artisan lang:js public/assets/dist/lang.dist.js

更多指令查看Laravel-JS-Localization#Usage

配置

發佈配置

php artisan vendor:publish --provider="Mariuzzo\LaravelJsLocalization\LaravelJsLocalizationServiceProvider"

之後可以到config/localization-js.php修改配置，可以修改只載入哪些語系檔案，以下的範例表示只會讀取到語系資料夾下的pagination.php跟validation.php

<?php

return [
    'messages' => [
        'pagination',
        'validation',
    ],
];

執行 webpack 時同時執行發佈messages.js

安裝 laravel-mix-serve npm i laravel-mix-serve

In webpack.mix.js

require("laravel-mix-serve");
mix.serve("php artisan lang:js");

實作

在都會使用到的模板引入 app.blade.php

<script src="{{ asset('messages.js') }}"></script>

在 vue 中使用Lang.get('messages.home');取得語系訊息

<template>
<p>{{ Lang.get("messages.hello") }}</p>
</template>

<script>
export default {
    data: () => ({
        Lang: Lang,
    }),
};

如果結構如下，就可以依照當前語系輸出對應的文字，假如當前語系是'zh-tw'，他就會找到zh-tw下的messages.php裡的hello' => '你好'，及顯示你好

/resources
    /lang
        /en
            messages.php
        /zh-tw
            messages.php

Lang Documentation

https://github.com/rmariuzzo/Laravel-JS-Localization#Documentation