Vue单文件组件的i18n翻译

Question

我正在使用Laravel并尝试创建多语言页面，所以我找到了一个非常好用的插件叫做VueI18N用于翻译，并通过npm安装并将以下代码放入我的app.js中使其工作（不知道为什么）。

//app.js
window.Vue = require('vue');

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

//tons of more components here
Vue.component('vue-test', require('./components/VueTestFileForLocalization.vue').default);

const messages = {
    en: {
        message: {
            hello: 'Hello, {name}!'
        }
    },
    de: {
        message: {
            hello: 'Guten Tag, {name}!'
        }
    }
};

const i18n = new VueI18n({
    locale: 'de',
    messages
});


  
const app = new Vue({
    el: '#vue-app',
    i18n
});

然后在我的vue-test中，我尝试成功输出以下内容：

 <template>
   <div>{{ $t('message.hello', { name: 'John' }) }}</div>
 </template>
 <script>
 export default {
   data() {
     return {};
   },
   created() {
     this.$i18n.locale = 'en';
   }
 };
 </script>

通过更改语言环境，我可以显示其他语言。太好了。 现在我认为，由于有这么多组件，我可能会遇到一个问题，即在app.js中定义所有本地化内容，而且这也不美观。因此，我尝试查找单文件组件文档的链接，但很遗憾没有成功。 我复制粘贴了代码（vue-i18n-loader应该默认由laravel安装），并修改了webpack文件。根据研究，我得到的错误似乎很常见，但我似乎无法解决它。

Value of key 'hello' is not a string!
Cannot translate the value of keypath 'hello'. Use the value of keypath as default

它只是输出我在消息中指定的键。

你们有没有想过，我可能做错了什么或者忘记设置了什么？任何提示都将不胜感激。 感谢您的时间。 最好的祝福， Desory

- Desory

---

你可以展示一下目前正常工作的部分，也许可以展示一下你是如何加载vue-loader和vue-i18n-loader的。同时，你的webpack配置文件和package.json文件也可以提供。你所加载的版本可能会有所帮助。 - Leon Vismer

Answer 1

虽然这不是你问题的直接答案，但我最近发现了另一种解决方案，可以更轻松地维护翻译。我将所有的翻译放在JSON文件中，这样我就可以在Laravel后端和Vue前端之间共享相同的翻译。这是基于以下内容实现的：https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n。因此，根据https://laravel.com/docs/7.x/localization#using-translation-strings-as-keys，创建resources/lang/en.json等文件，并填写内容。

{
"my_message": "This is my message in english",
...
}

我将创建一个resources/js/i18n.js文件，其中包含以下内容：

import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);

function loadLocaleMessages() {
    const locales = require.context(
        "../lang",
        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()
});

在 app.js 中导入如下内容：

//Localise
import i18n from "./i18n";
Vue.use(i18n);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
const app = new Vue({
    i18n,
    el: "#app"
});

您可以使用 __ 助手在 blade 模板中使用相同的翻译，在 Vue 中使用 $t(...)。

- Andrew

Answer 2

我曾经遇到过同样的问题，通过重新启动服务器解决了它。

再次运行npm run serve命令。

希望这能帮助未来的某位。

- Akere Achu

Answer 3

尝试以下更改 app.js 的代码，您的代码应该可以正常工作：

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import App from './components/VueTestFileForLocalization.vue';

Vue.use(VueI18n);

const messages = {
  en: {
      message: {
          hello: 'Hello, {name}!'
      }
  },
  de: {
      message: {
          hello: 'Guten Tag, {name}!'
      }
  }
};

const i18n = new VueI18n({
  locale: 'de',
  messages
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#vue-app');

- Danny Huisman