Question

我正在尝试使用语言组件，如下所述 https://github.com/Haixing-Hu/vue-i18n

但是我不知道如何正确使用它。我添加了组件

var i18n = require('vue-i18n');

// set plugin
Vue.use(i18n, {
  baseUrl: 'resources/i18n'
});

在main.js文件中，然后尝试使用变量，例如$ i18n.message.hello 在我的模板中（VUE文件，该文件在路由器中用作组件）。

我的组件的语法类似于

<template>
<div id="myid">
{{like $i18n.message.hello}}
</div>
</template>

export default {
  data () {
    return {
    ...

当我运行代码时，我没有看到所需的内容，并且在控制台中出现了错误消息，例如

属性或方法“ $ i18n”未在实例上定义，但在渲染期间被引用

所以我需要如何设置此变量，以便可以使用它。 “ store”变量出现相同的问题

Answer 1

根据the documentation，您必须使用内置函数$t()，该函数将字符串作为参数，这也是转换值的路径。

例如，如果在翻译文件中您具有以下对象：

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

// With this config

const i18n = new VueI18n({
  locale: 'ja', // set locale
  messages, // set locale messages
})


// Create a Vue instance with `i18n` option
new Vue({
  i18n // This is not Vue.use, it is inserted like the store
}).$mount('#app')

然后在您的html中看起来应该像这样：

<h1>{{ $('message.hello' }}</h1>

如何在Vue.js模板中使用全局变量？

1 个答案: