Vue 多语言切换

Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。

安装

我使用的是 npm 安装

npm install vue-i18n

然后在 main.js 中引入 vue-i18n

// main.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

新建语言文件

新建一个文件夹 l18n（文件夹名字随意），用于存放语言文件。在文件夹中新建 zh.js 和 ja.js 文件。分别用于存放中文和日文的语言文件。

// zh.js
module.exports = {
  message: {
    title: '你好! 世界',
    hello: '{msg}的世界',
    helloT: '你好!{0}',
    helloH: '你好! <br> 世界'
  },
  placeholder: {
    enter: '你想对世界说的话'
  },
  meal: {
    breakfast: '早餐',
    lunch: '中餐',
    dinner: '晚餐',
    supper: '夜宵'
  }
}

// ja.js
// 注意：一定是 exports，不是 export，否则会报错，报错信息是下列的中的内容不是 string
module.exports = {
  message: {
    title: 'ハロー! 世界',
    hello: '{msg}の世界',
    helloT: 'ハロー!{0}',
    helloH: 'ハロー! <br> 世界'
  },
  placeholder: {
    enter: '世界に言いたいことを入力してください'
  },
  meal: {
    breakfast: '朝食',
    lunch: 'ランチ',
    dinner: 'ディナー',
    supper: 'ナイトナイト'
  }
}

引用语言文件

设置完语言文件后，在 mian.js 中进行引用

const i18n = new VueI18n({
  locale: 'zh', // 默认语言标识
  messages: {
    'ja': require('@/l18n/lang/ja'), // 语言文件目录地址
    'zh': require('@/l18n/lang/zh')  // 语言文件目录地址
  }
})

// 在 new 中新增i18n
new Vue({
  el: '#app',
  ...
  i18n
})

使用

在语言文件中的变量都是$t('键名')，接下来就可以在组件中使用了。

直接使用

<!--.vue-->
<p>{{ $t("message.title") }}</p>

<!--经过编译后就会变成-->
<p>你好！世界</p>

比如需要绑定某些属性

<input type="text" :placeholder="$t('message.title')">

<!--经过编译后就会变成-->
<input type="text" placeholder="你好!世界">

变量使用

我们可以看到 message.hello 的值里面有个花括号 {msg},这里便是传入变量的地方

<p>{{ $t("message.hello", { msg: '绪锋' }) }}</p>

<!--经过编译后就会变成-->
<p>绪锋的世界</p>

还有一些其他的属性和方法，可以自己去官网查看，这就算一个简单的入门吧。

更换语言选项

每个组件都包含一个引用为 $i18n 属性的 VueI18n 实例，该实例也可用于更改语言环境.

每个组件都包含有一个 $i18n.locale 的属性，我们只需要更改这个属性的值，就达到了更换语言选项的目的。

// template
<button @click="selectLang()">中文/日文</button>

// script
selectLang () {
  this.$i18n.locale = this.$i18n.locale === 'zh' ? 'ja' : 'zh'
}

至此，一个简单的国际化就算完成了。

项目源代码见 Github