vue中使用vue-i18n简单实现国际化

vue中使用vue-i18n简单实现国际化

新建vue项目

首先,新建一个vue项目,并成功运行
vue init webpack ‘项目名’

目录结构
目录结构如下,en.js和zh.js分别是英文和中文的文本信息。
vue中使用vue-i18n简单实现国际化_第1张图片

main.js文件的配置,在main.js中添加以下跟vue-i18n的使用有关的配置项。
// en.js

const en = {
  message: {
    '100001': 'one,two,three,four',
    '100002': 'like a song',
    '100003': 'go,go,go'
  }
}

export default en
// zh.js

const zh = {
  message: {
    '100001': '一二三四',
    '100002': '像首歌',
    '100003': '偶雷欧雷欧雷'
  }
}

export default zh
// index.js

import en from './en'
import zh from './zh'

export default {
  en,
  zh
}

// i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './langs/index'

Vue.use(VueI18n)
/**
 * 从localStorage中拿到用户的语言选择,如果没有,那么默认为中文
 */
const i18n = new VueI18n({
  locale: localStorage.lang || 'zh',
  messages
})

export default i18n
// main.js
...
import i18n from './locale/i18n/i18n'
...

new Vue({
  ...
  i18n,
  ...
})
页面中如何使用。
<div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ $t('message.100001') }}</h2>
    <button @click="changeLanguage('zh')">中文</button>
    <button @click="changeLanguage('en')">English</button>
    <button @click="open">弹出框</button>
</div>
  ...
 methods: {
 changeLanguage (lang) {
      if (lang === 'zh') {
        this.$i18n.locale = 'zh'
      } else {
        this.$i18n.locale = 'en'
      }
      localStorage.setItem('lang', lang)// 存到localStorage中
    },
    open () {
      alert(this.$t('message.100001')) // 在js中使用前面要加 this,message是我们在en.js中和zh.js中自己定义的,可修改
    }
 }
实现效果如图

vue中使用vue-i18n简单实现国际化_第2张图片vue中使用vue-i18n简单实现国际化_第3张图片
一个极其简单的中英文切换就完成了,Finish!
项目链接: https://github.com/zhoufahai/-.git

你可能感兴趣的:(vue.js)