如何通过laravel-vue-i18n包实现Vue多语言切换？

一、前端Vue组件实现（匹配你的选项式API代码） #

<template>
  <!-- 语言切换按钮 -->
  <button @click="switchLanguageTo('en')">English</button>
  <button @click="switchLanguageTo('pt')">Português</button>
</template>

<script>
import { loadLanguageAsync } from 'laravel-vue-i18n';

export default {
  methods: {
    async switchLanguageTo(lang) {
      // 1. 异步加载目标语言包
      await loadLanguageAsync(lang);
      // 2. 更新Vue实例的当前语言
      this.$i18n.locale = lang;
      // 3. 发送请求到后端保存语言偏好（避免页面刷新后重置）
      await fetch('/set-language', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({ language: lang })
      });
      // 4. 刷新页面同步Blade模板的语言设置
      window.location.reload();
    }
  }
};
</script>

二、后端Laravel配置 #

1. 添加语言切换路由
   在routes/web.php中新增路由：

use App\Http\Controllers\LanguageController;

Route::post('/set-language', [LanguageController::class, 'set'])->name('set.language');

2. 创建语言控制器
   生成LanguageController并实现保存语言的逻辑：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class LanguageController extends Controller
{
    public function set(Request $request)
    {
        // 验证语言合法性
        $request->validate([
            'language' => 'required|in:en,pt' // 可根据你的语言列表调整
        ]);

        // 将语言存入Session
        session()->put('locale', $request->language);

        return response()->json(['status' => 'success']);
    }
}

3. 设置默认语言从Session读取
   在app/Providers/AppServiceProvider.php的boot方法中添加：

public function boot()
{
    // 如果Session中有语言设置，覆盖默认语言
    if (session()->has('locale')) {
        app()->setLocale(session()->get('locale'));
    }
}

三、确保Laravel-Vue-i18n初始化正确 #

在resources/js/app.js中确认i18n初始化配置：

import { createApp } from 'vue';
import { i18nVue } from 'laravel-vue-i18n';

const app = createApp({});

app.use(i18nVue, {
    resolve: async lang => {
        // 匹配你的语言文件路径
        const langs = import.meta.glob('../../lang/*.json');
        return await langs[`../../lang/${lang}.json`]();
    }
});

app.mount('#app');

完成以上配置后，点击语言按钮会执行完整流程：加载对应语言包 → 更新Vue界面语言 → 后端保存语言到Session → 刷新页面后Blade模板和Vue都会同步使用新设置的语言。

内容的提问来源于stack exchange，提问作者mrDandaleonx