Laravel 10+Breeze+Vue+Inertia项目本地化配置求助

先解决你的印地语翻译不生效问题 #

你遇到的核心问题大概率是缓存未清除或前端未同步当前locale配置，按以下步骤排查：

1. 清除Laravel配置和翻译缓存：

   php artisan config:clear
   php artisan cache:clear
   php artisan view:clear
   

   修改config/app.php的locale后，若之前有缓存，Laravel不会读取新配置。
2. 确认lang/hi/auth.php文件存在且格式正确，比如：

   <?php
   
   return [
       'failed' => 'अपने प्रदान किए गए प्रमाणपत्र हमारे रिकॉर्ड से मेल नहीं खाते हैं।',
       // 其他auth翻译项...
   ];
   

3. 检查Inertia是否传递了当前locale到前端：在AppServiceProvider的boot方法中添加共享数据：

   use Inertia\Inertia;
   
   public function boot()
   {
       Inertia::share('locale', app()->getLocale());
       // 可选：共享当前locale的auth翻译组
       Inertia::share('translations.auth', __('auth'));
   }
   

简便高效的本地化实现方案 #

方案1：原生实现（无需额外包） #

适合需求简单、不想引入第三方依赖的场景，完全复用Laravel的翻译体系：

1. 后端共享翻译数据：在AppServiceProvider中按需共享需要的翻译组（比如auth、validation）：

   public function boot()
   {
       Inertia::share([
           'locale' => app()->getLocale(),
           'translations' => [
               'auth' => __('auth'),
               'validation' => __('validation'),
           ],
       ]);
   }
   

2. 前端封装翻译函数：在resources/js/app.js中给Vue全局添加$t方法，实现和Laravel一致的翻译语法：

   createInertiaApp({
     // ...其他配置
     setup({ el, app, props, plugin }) {
       const vueApp = createApp({ render: () => h(app, props) })
         .use(plugin)
         .mixin({
           methods: {
             $t(key, replacements = {}) {
               // 拆分翻译键，比如 'auth.failed' 拆成 ['auth', 'failed']
               const [group, item] = key.split('.');
               let translation = this.$page.props.translations[group]?.[item] || key;
               
               // 处理变量替换（比如 :attribute）
               Object.entries(replacements).forEach(([k, v]) => {
                 translation = translation.replace(`:${k}`, v);
               });
               
               return translation;
             }
           }
         });
   
       vueApp.mount(el);
     },
   });
   

3. 前端使用：在Vue组件中直接调用：

   <template>
     <div>{{ $t('auth.failed') }}</div>
     <!-- 带变量的翻译 -->
     <div>{{ $t('validation.required', { attribute: 'Email' }) }}</div>
   </template>
   

4. 后端错误自动翻译：Laravel的验证错误、Auth错误会自动使用当前locale返回翻译后的内容，直接在前端form组件中渲染即可。

方案2：使用Laravel-JS-Localization包 #

这个包完全适配你的场景，它能把Laravel的翻译文件导出为JS文件，让前端直接复用Laravel的翻译逻辑（包括复数、变量替换等），无需手动共享翻译数据：

1. 安装包：

   composer require mariuzzo/laravel-js-localization
   

2. 发布配置：

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

3. 生成JS翻译文件：

   php artisan lang:js
   

   执行后会在public/js/lang.js生成包含所有翻译内容的JS文件。
4. 前端引入并使用：
   在resources/js/app.js顶部引入：

   import '../../public/js/lang.js';
   

   然后在Vue组件中直接调用：

   <template>
     <div>{{ Lang.get('auth.failed') }}</div>
     <!-- 带变量和复数的翻译 -->
     <div>{{ Lang.choice('validation.min.string', 5, { min: 5 }) }}</div>
   </template>
   

   这个包完全兼容Laravel的翻译语法，无需额外适配。

额外优化：动态切换locale #

如果需要支持前端切换语言，可添加本地化中间件：

1. 创建app/Http/Middleware/SetLocale.php：

   <?php
   
   namespace App\Http\Middleware;
   
   use Closure;
   use Illuminate\Http\Request;
   use Illuminate\Support\Facades\App;
   
   class SetLocale
   {
       public function handle(Request $request, Closure $next)
       {
           // 优先从请求参数获取locale，其次从会话读取
           $locale = $request->input('locale') ?? session('locale') ?? config('app.locale');
           App::setLocale($locale);
           session()->put('locale', $locale);
   
           return $next($request);
       }
   }
   

2. 在app/Http/Kernel.php的web中间件组中添加这个中间件：

   protected $middlewareGroups = [
       'web' => [
           // ...其他中间件
           \App\Http\Middleware\SetLocale::class,
       ],
   ];
   

3. 前端切换语言时，只需跳转或发送请求带?locale=hi参数即可，后端和前端会同步切换到对应语言。

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