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测试中，我尝试成功输出此结果：

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

，通过更改语言环境，我还可以显示其他语言。大。现在，我认为使用这么多组件，可能会在定义app.js内的所有本地化时遇到问题，而且也不美观。因此，不幸的是，我尝试查找This link here to the docs for single file components，但未成功。我复制粘贴了代码（默认情况下laravel也应该安装vue-i18n-loader）并修改了webpack文件。经过研究，我得到的错误似乎很普遍，但我似乎无法解决。

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

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

你们中的任何人是否有主意，我可能做错了什么或忘记了设置？任何提示将不胜感激。感谢您的时间最好的祝福，毁灭

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

使用内容创建资源/lang/en.json等

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

我将创建包含以下内容的资源/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"
});

然后可以使用__ helper在刀片模板中使用相同的翻译，而使用$ t（...）在Vue中使用相同的翻译

Answer 2

尝试对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');

单个文件组件的Vue i18n转换

2 个答案: