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

发表于 | 分类于
字数统计: 587 字 | 阅读时长 ≈ 3 分钟

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

安装

1
npm install vue-i18n --save

基本使用

main.js中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 引入
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组件中使用

1
<h1>{{ $t('msg.hello') }}</h1>
1
2
// 切换修改this.$i18n.locale的值即可
this.$i18n.locale = 'en'

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

参考element-admin里的写法

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

    lang

    • en.js
    • index.js
    • zh.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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入口文件

1
2
3
4
5
6
7
8
9
10
11
//...
import i18n from './lang' // 导入配置文件(默认会导入./lang/index.js)
//...

new Vue({
  el: '#app',
  router,
  store,
  i18n, // 挂在到Vue实例上
  render: h => h(App)
}

组件中使用

1
2
3
4
5
6
7
8
<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>
1
2
3
4
5
6
7
8
9
10
11
handleSetLanguage(lang) {
    // 切换
    this.$i18n.locale = lang
    // 结合vuex （vuex的mutations方法结合了cookie）
    this.$store.dispatch('setLanguage', lang)
    // 切换成功提示
    this.$message({
        message: 'switch language success',
        type: 'success'
    })
}

:artificial_satellite:点击跳转github地址

------ 本文结束------
0%