Vue+vue-i18n实现国际化(中英文切换)

存在相关环境，安装相关插件:npm i vue-i18n element-ui -S

注：获取浏览器系统语言    const navLang = navigator.language

vue+vue-i18n实现国际化

相关目录：创建相关文件夹，并创建lang文件夹及i18n.js，在lang文件夹中创建en.js，zh.js，index.js

 i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './lang'
Vue.use(VueI18n);
const i18n = new VueI18n({
     locale: localStorage.getItem('LANGUAGE') || 'zh',//防止刷新浏览器恢复默认值
     message  
});
export default i18n;

index.js

import en from './en'
import zh from './zh'
export default {
    en,
    zh
}

zh.js和en.js分别对应自定义的中英文内容

const zh = {     //zh
     commons: {
         change: '切换'      
     }
}
export default zh;

const en = {     //en
     commons: {
         change: 'Change'      
     }
}
export default en;

 

注意：zh.js和en.js中的键应该保持一致

main.js中引入并注册全局

vue文件中应用：

<button @click="changeLanguage">{{$t('commons.change')}}</button>

切换：

data() {
    return {
        lang: 'zh'
    }
},
methods: {
    changeLanguage() {
         if(this.lang === 'zh'){
             this.lang ='en';
             this.$i18n.locale = this.lang;
             localStorage.setItem("LANGUAGE",this.lang);
         }else{
             this.lang ='zh';
             this.$i18n.locale = this.lang;
             localStorage.setItem("LANGUAGE",this.lang);
         }
    }
}