vue-i18n国际化

我们会遇到国际化的问题，比如一个页面可以切换中英文，如果同样的代码写两份，势必会造成严重的冗余，所以我们可以利用国际化，优化代码的结构

如何使用

第一步安装依赖

npm install --save vue-i18n

基本使用

我们新建一个lang文件夹，内部存放国际化的字段名称

 

 

然后在index.js中引入i18n并使用

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
    // 设置当前语言
    locale: 'zh',
    messages: {
        'en':{
            name:'name'
        },
        'zh':{
            name:'名字'
        }
    }
})
export default i18n

 

在main.js文件中进行注册

import Vue from 'vue'
// 相对路径引入的App.vue文件
import App from './App.vue'
// 引入ui框架
import elementUi from 'element-ui'
//引入css
import 'element-ui/lib/theme-chalk/index.css'
//使用element-ui
Vue.use(elementUi)
// 引入iview-ui框架
import iviewUi from "view-design"
//引入css
import 'view-design/dist/styles/iview.css'
//使用iview-ui
Vue.use(iviewUi)
//引入国际化
import i18n from "./lang/index.js"
console.log(i18n)
new Vue({
    // 渲染节点
    render: h => h(App),
    i18n:i18n
}).$mount('#app')

此时我们就可以在任意的文件中使用国际化了

{{$t('name')}}

 

 

 当把locale: 'zh',改为locale: 'en'时为英文

 

机理，就是我们页面显示的是i18n中messages中zh和en对应的字段名称，找的是相同key值，所以，如果我们要设置国际化，那么key值一定是相同的

 

如果这个文件中如果字段量特别大，需要拆分文件

此时我们可以在lang文件夹目录下继续新建zh 和en文件，分别用来存放中英文字段

 

 

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zh from "./zh.js"
import en from "./en.js"
Vue.use(VueI18n)
const i18n = new VueI18n({
    // 设置当前语言
    locale: 'en',
    messages: {
       en,
       zh
    }
})
export default i18n

 

如果切换中英文状态

我们可以通过修改this.$i18n.locale去进行切换

 change(){
          if(this.$i18n.locale=='zh'){
              this.$i18n.locale='en'
          }else{
              this.$i18n.locale='zh'
          }
      }
    }

 

中文

 

 英文

 

 

此时的切换知识页面语言，和系统没有关系，如果刷新页面，还是会回到中文

 

设置并切换浏览器系统语言

我们现在写的当前的语言切换是默认的状态，初始化的时候一定加载的是默认的，比如默认的是中文，无论你后期改成什么状态，最后重新加载时一定是中文

此时我们需要设置系统的语言环境

 

我们使用localStorage去辅助我们完成国际化的语言环境设置

比如我们目目前只支持中英文

此时我们需要获取当前的语言状态

navigator.language能够获取当前浏览器的语言环境zh-CN是中文，en-US是英文

可以在lang文件中设置对应的语言环境

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zh from "./zh.js"
import en from "./en.js"
Vue.use(VueI18n)
// 设置对应的语言环境
    // 获取浏览器的语言环境
const navLang=navigator.language
let localLang = (navLang === 'zh-CN' ||navLang ===  'en-US' ) ? navLang:false
if(localLang=='zh-CN'){
    localLang='zh'
}else if(localLang=='en-US'){
    localLang='en'
}
// 获取localStorage的语言状态，如果没有设置默认的语言环境，如果浏览器默认也没有语言环境，就设置为中文
let lang=localStorage.getItem("lang")||localLang||'zh'
  // localStorage存储最新的语言信息
  localStorage.setItem("lang",lang)
console.log(navigator.language)
const i18n = new VueI18n({
    // 设置当前语言
    locale: localStorage.getItem('lang')||'zh',
    messages: {
       en,
       zh
    }
})
export default i18n

 

需要注意的是切换的时候也必选捎带存储一下localStorage的状态

change(){
          if(this.$i18n.locale=='zh'){
              this.$i18n.locale='en'
          }else{
              this.$i18n.locale='zh'
          }
          window.localStorage.setItem('lang',this.$i18n.local)
      }

此时修改之后，即便是刷新页面，重新加载都能够持久之前的语言环境