结合Spatie Laravel Translation Loader与Inertia JS向Vue传翻译数据咨询

以下是两种常用的高效实现方案，可根据项目翻译量规模选择：

方案1：全局共享全量翻译（适合翻译总量不大的项目） #

这个方案实现最简单，翻译可以在所有Vue组件内直接调用：

• 第一步：在Laravel的HandleInertiaRequests中间件中配置全局共享数据，同时添加缓存减少数据库查询：

  public function share(Request $request): array
  {
      return array_merge(parent::share($request), [
          // 缓存翻译数据1小时，可根据业务需求调整过期时间
          'translations' => cache()->remember('translations_'.app()->getLocale(), 3600, function () {
              return \Spatie\TranslationLoader\LanguageLine::getGroupedTranslations(app()->getLocale());
          }),
      ]);
  }
  

  注意在LanguageLine模型的更新/删除事件中添加清除翻译缓存的逻辑，保证翻译更新后前端能拿到新数据
• 第二步：在Vue 2入口文件（一般是app.js）中挂载全局翻译方法：

  Vue.prototype.$t = function (key, replace = {}) {
      // 优先取数据库翻译，不存在则返回key作为兜底
      let translation = this.$page.props.translations?.[key] ?? key
      // 支持占位符替换，比如$t('messages.hello', {name: '张三'})
      Object.keys(replace).forEach(param => {
          translation = translation.replace(`:${param}`, replace[param])
      })
      return translation
  }
  

• 第三步：组件内直接调用即可：

  <template>
    <div>{{ $t('messages.welcome') }}</div>
  </template>
  

方案2：按需加载对应翻译组（适合翻译量极大的项目） #

如果翻译总量过万，全量加载会拖慢首屏速度，可选择按页面/模块加载对应翻译组：

• 第一步：在对应页面的Controller中只返回当前页面需要的翻译组：

  public function dashboard()
  {
      return Inertia::render('Dashboard', [
          // 只加载dashboard分组的翻译
          'pageTranslations' => \Spatie\TranslationLoader\LanguageLine::getGroupedTranslations(app()->getLocale(), 'dashboard'),
      ]);
  }
  

• 第二步：组件内接收props后单独使用，也可以封装成页面级mixins统一处理：

  <template>
    <div>{{ $t('dashboard.title') }}</div>
  </template>
  <script>
  export default {
    props: ['pageTranslations'],
    methods: {
      $t(key, replace = {}) {
        let translation = this.pageTranslations?.[key] ?? key
        Object.keys(replace).forEach(param => {
          translation = translation.replace(`:${param}`, replace[param])
        })
        return translation
      }
    }
  }
  </script>
  

多语言切换适配 #

如果项目支持多语言切换，只需在切换语言的逻辑中，重新请求对应语言的翻译数据，替换当前的翻译变量即可，无需刷新页面。

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