在 Vue 中使用 vue-i18n，配套双语

1 安装 vue-i18n

npm install vue-i18n

2 配置文件

在 src 目录下新建一个 i18n 文件夹，在 i18n 文件夹里分别创建 i18n.js、langs 文件夹，在 langs 文件夹下面创建你的语言文件（cn.js/en.js/ja.js）和 index.js 文件

3 i18n.js

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

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

4 index.js

import en from './en'
import cn from './cn'
import ja from './ja'
export default {
  en,
  cn,
  ja
}

5 cn.js

const cn = {
  message: {
    hello: '你好'
  }
}

export default cn

6 en.js

const en = {
  message: {
    hello: 'hello'
  }
}

export default en

在配置语言包的时候，key 值一定要保持统一，因为 i18n 是通过你的 key 值来切换语言的，如果 key 值有误，就不能正确的切换语言包，这一点千万要注意

7 引用 main.js

import Vue from 'vue'
import App from './App'
import i18n from './i18n/i18n'

new Vue({
  el: '#app',
  i18n, //加上i18n
  components: { App },
  template: '<App/>'
})

配置页面

HTML 部分

<p>{{$t('message.hello')}}</p>
//此时应该是中文
<button @click="switchLang('en')">英语</button>
<button @click="switchLang('cn')">中文</button>
<button @click="switchLang('ja')">日语</button>

Js 部分

methods:{
    switchLang(lang)  {
        this.$i18n.locale = lang
        //把语言保存在localStorage中
        localStorage.setItem('lang',lang);
    }
  },