vue切换语言_vue国际化配置

存在相关环境，安装相关插件: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);
         }
    }
}

今天的文章vue切换语言_vue国际化配置分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/48497.html

vue切换语言_vue国际化配置

相关推荐

发表回复