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

新建vue项目

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

目录结构
目录结构如下，en.js和zh.js分别是英文和中文的文本信息。

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中自己定义的，可修改
    }
 }

实现效果如图

一个极其简单的中英文切换就完成了，Finish！
项目链接: https://github.com/zhoufahai/-.git