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

问题描述

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

{{ $t('foo') }}

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

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

解决方法

首先添加本地化所需的软件包

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",}

现在让我们将i18n软件包导入resources/js/app.js

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>