vue+elementUI+vue-i18n实现国际化

灰太狼 2023-06-30 08:50 162阅读 0赞

1.安装: npm install vue-i18n

2.vue.js+vue-i18n+elementUI国际化配置  
在main.js同级建i18n文件夹，并里面建i18n.js、langs文件夹，langs文件夹下建en.js、cn.js  
目录如下:  
![20200116102815773.png][]  
 i18n/i18n.js

//i18n.js
    
    import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    import locale from 'element-ui/lib/locale'
    import messages from './langs'
    
    Vue.use(VueI18n)
    const i18n = new VueI18n({
      locale: localStorage.lang || 'zh-cn',
      messages
    })
    
    locale.i18n((key, value) => i18n.t(key, value)) //实现element插件的多语言切换
    
    export default i18n

i18n/index.js

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

i18n/en.js

import enLocale from 'element-ui/lib/locale/lang/en'
    const en = {
      login:{login:"Login"},
      ...enLocale
    }
    export default en;

i18n/cn.js

import cnLocale from 'element-ui/lib/locale/lang/zh-CN'
    const cn = {
      login:{login:"登 录"},
      ...cnLocale
    }
    export default cn;

在main.js中引用国际化文件

import Vue from 'vue'
    import i18n from './i18n/i18n'
    import App from './App'
    import router from './router'
    import store from './store/index'
    import ElementUi from 'element-ui'
    
    Vue.use(ElementUi)
    
    new Vue({
      el: '#app',
      i18n,
      router,
      store,
      components: { App },
      template: '<App/>'
    })

这样就完成了国际化

3.在组件中使用国际化

//第一种
    <span v-text="$t('login.login)"></span>
    
    //第二种
    <span>{
       {$t('login.login')}}</span>

4.在js中使用

this.$t('login.login')

5.语言切换

<el-select v-model="lang" @change="changeLang">
            <el-option label="简体中文" value="zh-cn"></el-option>
            <el-option label="English" value="en"></el-option>
    </el-select>

changeLang(v){
     localStorage.setItem("lang",v);//记录语言
     this.$i18n.locale = v;
    }

[20200116102815773.png]: https://img-blog.csdnimg.cn/20200116102815773.png