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

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”未在实例上定义，但在渲染期间被引用

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

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>