国际化语言切换/Vue-i18n的使用

多语言切换vue实现国际化插件vue-i18n，参考element-admin中i18n的使用；

闲来无事可以点点我的博客，有问题的话欢迎指正~www.hollytree.top/

安装

npm install vue-i18n --save复制代码

基本使用

main.js中配置

// 引入
import VueI18n from 'vue-i18n'
​
Vue.use(VueI18n)
​
// 配置
const i18n = new VueI18n({
    locale: 'en', // 默认语言
    message: { // 语言文字
        en: {
            msg: {
                hello: 'hello world'
            }
        },
        cn: {
            msg: {
                hello: '你好，世界'
            }
        }
    }
})
// 挂在到Vue实例
new Vue ({
    el: '#app',
    router,
    i18n,
    components: { App },
    template: '<App/>'
})复制代码

vue组件中使用

<h1>{{ $t('msg.hello') }}</h1>复制代码

// 切换修改this.$i18n.locale的值即可
this.$i18n.locale = 'en'复制代码

要切换的文字较少可以参照以上，如果较多可以

参考element-admin里的写法

• 创建了一个单独的语言文件夹

  lang

  • en.js

  • index.js

  • zh.js

// en.js 导出英文对象
export default {
  ...
  navbar: {
    logOut: 'Log Out',
    dashboard: 'Dashboard',
    github: 'Github',
    screenfull: 'screenfull',
    theme: 'theme'
  }
  ...
}
// zh.js 导出中文对象
export default {
  ...
  navbar: {
    logOut: '退出登录',
    dashboard: '首页',
    github: '项目地址',
    screenfull: '全屏',
    theme: '换肤'
  }
  ...
}复制代码

配置文件index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui语言包
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui语言包
import enLocale from './en' 
import zhLocale from './zh'
​
Vue.use(VueI18n)
​
const messages = {
  en: {
    // ES6扩展运算符合并对象
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}
​
// 结合cookie记录用户选择的语言，若无默认en
const i18n = new VueI18n({
  // set locale
  // options: en or zh
  locale: Cookies.get('language') || 'en',
  // set locale messages
  messages
})
​
export default i18n复制代码

main.js入口文件

//...
import i18n from './lang' // 导入配置文件(默认会导入./lang/index.js)
//...
​
new Vue({
  el: '#app',
  router,
  store,
  i18n, // 挂在到Vue实例上
  render: h => h(App)
}复制代码

组件中使用

<div class="tips">
<span>{{$t('login.username')}} : admin</span>
<span>{{$t('login.password')}} : {{$t('login.any')}}</span>
</div>
<div class="tips">
<span style="margin-right:18px;">{{$t('login.username')}} : editor</span>
<span>{{$t('login.password')}} : {{$t('login.any')}}</span>
</div>
​复制代码

handleSetLanguage(lang) {
    // 切换
    this.$i18n.locale = lang
    // 结合vuex （vuex的mutations方法结合了cookie）
    this.$store.dispatch('setLanguage', lang)
    // 切换成功提示
    this.$message({
        message: 'switch language success',
        type: 'success'
    })
}复制代码

?点击跳转github地址