---
tags: PHP, Laravel, Backend, Vue
---

# 在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](https://github.com/rmariuzzo/Laravel-JS-Localization)

[laravel-localization-to-vue](https://github.com/kg-bot/laravel-localization-to-vue)

[laravel-vue-i18n-generator](https://github.com/martinlindhe/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](https://github.com/rmariuzzo/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");

## 實作

`npm run dev`產生`messages.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)