当前位置：首页 > news >正文

vue怎么实现国际化? vue-i18n 插件实现国际化，支持切换不同语言

news 2025/7/29 12:01:03

依赖的文档开始 | Vue I18n

一、安装

npm install vue-i18n

如果在一个模块系统中使用它，你必须通过 Vue.use() 明确地安装 vue-i18n：

import Vue from 'vue'
import VueI18n from 'vue-i18n'Vue.use(VueI18n)

二、使用

在 src 下创建 lang 文件夹

1.准备语言包

这里我们用中文和英文的来举例，在lang文件下创建en.js和zh,js

// en.js
export default {login: {username: 'Username',password: 'Password'},
}

// zh.js
export default {login: {username: '用户名',password: '密码'},
}

2、准备翻译的语言环境

在 lang 下创建 index.js，使用如上的两种语言包。

// 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 lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // element-ui lang
import enLocale from './en'
import zhLocale from './zh'Vue.use(VueI18n)const messages = {en: {...enLocale,...elementEnLocale},zh: {...zhLocale,...elementZhLocale}
}const i18n = new VueI18n({// 设置语言 选项 en | zhlocale: Cookies.get('language') || 'zh',// 设置文本内容messages
})export default i18n

3、实现语言翻译

import i18n from './lang'
// use使用添加i18n
Vue.use(Element, {i18n: (key, value) => i18n.t(key, value)
})
new Vue({el: '#app',router,store,i18n,//注入render: h => h(App)
})

如何使用

<template><div >{{$t('login.password')}}</div>
</template>

实现语言切换

  <template><el-dropdown trigger="click" class="international" @command="handleSetLanguage"><div><svg-icon class-name="international-icon" icon-class="language" /></div><el-dropdown-menu slot="dropdown"><el-dropdown-item :disabled="language==='zh'" command="zh">中文</el-dropdown-item><el-dropdown-item :disabled="language==='en'" command="en">English</el-dropdown-item></el-dropdown-menu></el-dropdown>
</template>computed: {language() {return this.$store.getters.language}},methods: {handleSetLanguage(lang) {this.$i18n.locale = lang;   //设置当前语言// this.$store.dispatch('app/setLanguage', lang);this.$message({message: '设置语言成功',type: 'success'})},}

到这里就可以实现语言切换了