i18n在vue项目中使用

i18n：i18n是 Internationalization 这个英文的简写，即国际化的意思，vue-i18n是一款针对于vue开发的国际化插件,让项目支持多语言切换，以适应不同地区用户的需求。

安装vue-i18n：

npm install vue-i18n --save

main.js中全局引入i18n

import VueI18n from "vue-i18n";

注册：

Vue.use(VueI18n);

 实例化i18n并引入语言文件：

const i18n = new VueI18n({
  locale: "en",//语言标识
  messages: {//配置多语言 根据自己的项目需求  这里配置了中文和英文
    'zh': require('@/lang/zh.js'),//中文
    'en': require('@/lang/en.js'),//英文
  },
  fallbackLocale: "zh",//没有英文的时候默认 中文语言
  silentTranslationWarn: true,//报错时加上这个参数可以取消警告
  //this.$i18n.locale // 通过切换locale的值来实现语言切换
});

在vue实例中注册：

let VM = new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

src/lang/zh.js：

module.exports = {
    name:"小明",
    m:{
        a:"哈哈哈",
        b:"嗯嗯呢"
    }
}

src/lang/en.js：

module.exports = {
    name:"xiaoming",
    m:{
        a:"hahaha"
    }
}

 

页面中使用：

        <h1>{{$t('name')}}</h1>
        <h1>{{$t('m.a')}}</h1>
        <h1>{{$t('m.b')}}</h1>
        <button @click="toggleLang">语言切换</button>

动态切换多语言：

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

 

 如何根据浏览器语言 动态加载 成对应的多语言？

import VueI18n from "vue-i18n";
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: "en",//语言标识
  messages: {},//
  fallbackLocale: "zh",//没有英文的时候默认 中文语言
  silentTranslationWarn: true,//报错时加上这个参数可以取消警告
  //this.$i18n.locale // 通过切换locale的值来实现语言切换
});
let navigatorLanguage = (navigator.language || navigator.browserLanguage).toLowerCase(); //常规浏览器语言和IE浏览器
navigatorLanguage = navigatorLanguage.substr(0, 2); //截取lang前2位字符
function loadI18nMessages(lang) {
  return import(`@/lang/${lang}`).then(msg => {
    i18n.setLocaleMessage(lang, msg.default);
    i18n.locale = lang;
    return Promise.resolve();
  });
}
loadI18nMessages(navigatorLanguage);


Vue.config.productionTip = false;

let VM = new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

export default VM;

由于现在变成了import引入语言包的形式，所以每个语言包的导出方式也应该变成es6的导出形式

从原来的module.exports = {}   变成  export default {}

 

比如src/lang/zh.js

export default  {
    name:"小明",
    m:{
        a:"哈哈哈",
        b:"嗯嗯呢"
    }
}

根据浏览器语言动态加载语言包  可以避免加载所有的语言包，因为只加载了一种语言包，所以就不能手动切换到其它语言了

 

 

。