i18n国际化语言使用

1.下载安装vue-i18n（以下都可以）
npm install vue-i18n / npm install vue-i18n --save / npm install [email protected]
2.在static下面分别创建lang文件夹，文件夹下面放语言包en.js和zh.js文件(配置自己所需的语言)，
en.js

module.exports = {
  message: {
    hello: 'hello',
    about: 'about',
    welcome: 'welcome'
  }
}

zh.js

  module.exports = {
    message: {
      hello: '你好',
      about: '关于',
      welcome: '欢迎'
    }
  }

3.在main.js中引入

import locale from 'element-ui/lib/locale'
import VueI18n from 'vue-i18n'
import LangEn from '../static/lang/en'
import LangZh from '../static/lang/zh'
Vue.use(VueI18n)

const  i18n = new VueI18n({
   locale: localStorage.getItem('locale') || 'zh',
//解决页面刷新后，通过按钮切换的语言还原成了最初的语言，无法保存
  messages: {
    'en': LangEn,
    'zh': LangZh
  }
})
/* 为了实现element插件的多语言切换 */
locale.i18n((key, value) => i18n.t(key, value))
挂载到Vue的实例上
new Vue({
  el: '#app',
  router,
  i18n, //<====
  template: '',
  components: { App }
})

4.在页面中应用

/***语法**/
{{ $t("message.hello") }}
v-bind:placeholder="this.$t('message.welcome')"
中文
英文

//切换方法
toggleLang(lang) {
      if(lang == 'zh'){
        localStorage.setItem('locale', 'zh')
        this.$i18n.locale = localStorage.getItem('locale')
        this.$message({
          message: '切换为中文！',
          type: 'success'
        })
      } else if (lang == 'en') {
        localStorage.setItem('locale', 'en')
        this.$i18n.locale = localStorage.getItem('locale')
        this.$message({
          message: 'Switch to English!',
          type: 'success'
      })
}

5.动态切换语言

实际项目中，往往需要动态切换语言，比如当用户点击了其需要的语言。

vue-i18n 提供了一个全局配置参数叫 “locale”，通过改变 locale 的值可以实现不同语言的切换。

在页面中只需要在切换时，修改this.$i18n.locale的值即可。
转载：https://blog.csdn.net/joyce_lcy/article/details/78840371