如何在 Laravel 项目中本地化 SFC Vue.js 组件答案

【问题标题】：How to localize SFC Vue.js Component in Laravel Project如何在 Laravel 项目中本地化 SFC Vue.js 组件
【发布时间】：2020-12-17 05:47:28
【问题描述】：

当我在 SFC vue 组件中本地化时

{{ $t('foo') }}

然后我在控制台收到这个错误，我该如何调用$t函数

属性或方法“$t”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

【问题讨论】：

请看这个stackoverflow.com/questions/49775725/…

标签： laravel vue.js localization laravel-mix vue-i18n

【解决方案1】：

首先添加本地化所需的包

yarn add vue-i18n @kazupon/vue-i18n-loader

然后将以下配置添加到webpack.mix.js，确保i18n()应该在js()之前

mix.extend( 'i18n', new class {
    webpackRules() {
        return [
            {
                resourceQuery: /blockType=i18n/,
                type:          'javascript/auto',
                loader:        '@kazupon/vue-i18n-loader',
            },
        ];
    }
}(),
);

mix.i18n()
    .js('resources/js/app.js', 'public/js')

添加resources/js/utils/i18n.js，我们将从locale目录读取配置

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function loadLocaleMessages () {
  const locales = require.context('../locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })
  return messages
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})

制作目录locales并创建文件resources/js/locales/en.json，添加如下内容

{
    "foo": "bar",
}

现在让我们在resources/js/app.js中导入i18n包

import router from '@/router'
import i18n from '@/utils/i18n'

const el = "#app"
const app = new Vue({ i18n, router, el });

最后，您可以在 Vue 组件文件中使用本地化字符串

{{ $t('foo') }}

可以在vue文件中定义i18n规则

<template>
  <button>{{ $t('Save') }}
</template>
<i18n>
{
  "en": {
    "Save": "Save Now"
  }
}
</i18n>

【讨论】：