左小白的技术日常
Github

Vue 使用 vue-i18n 国际化

这篇文章发布于 2021/04/03,归类于
标签:
vue 国际化vue international vue i18n

在 vue 项目中,可以使用 vue-i18n 来做国际化。下面来看具体是怎么使用的

  1. 安装

    npm install vue-i18n --save
  2. 在 main.js 引入,并做初始化配置,使用 locale 设置默认语言,使用 messages 对象属性,指定不同语言对应的内容。

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

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'ja', // 设置默认语言环境
  // 在 vue template 的 {{}} 中,使用 $t('un') 即可拿到 un 属性指定的值
  // 不需要在 data() {} 中设置什么
  messages: {
    en: { // 中文
      un: 'hi',  
      message: {
        hello: 'hello world',
      },
    },
    ja: { // 日文
      un: 'ちは',
      message: {
        hello: 'こんにちは、世界',
      },
    }
  },
})

new Vue({
  i18n,
  router,
  store,
  render: (h) => h(App),
}).$mount('#app')
  1. 在 vue template 中直接使用。如果想动态切换语言,使用 this.$root.$i18n.locale = 'en' 即可修改语言
<template>
  <div id="app">
    <div id="nav">
      <p>{{ $t('un') }}</p>
      <p>{{ $t('message.hello') }}</p>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  created() {
    setTimeout(() => {
      console.log('lang change')
      this.$root.$i18n.locale = 'en' // 5s 后变更默认语言为英文
    }, 5000)
  },
}
</script>

注意如果信息较多,messages 信息的内容,最好模块化,尽量分割成子模块,不要全部写在一起。