国际化的vue-i18n

最新推荐文章于 2024-03-23 08:46:11 发布

smileYuWei

最新推荐文章于 2024-03-23 08:46:11 发布

阅读量151

点赞数

分类专栏： js + ts

本文链接：https://blog.youkuaiyun.com/qq_37976966/article/details/95067789

版权

js + ts 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在Vue项目中实现国际化功能，通过vue-i18n库进行配置和使用。内容包括下载相关依赖、设置语言包及三种不同的写法实现多语言切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.下载cookie
2.下载i18n

npm install i18n --save

3.配置以及使用

常常一个项目中，我会以下列的结构来配置语言包:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import cookie from 'cookie'
Vue.use(VueI18n)
const localeCookie = cookie.parse(document.cookie).blueking_language ? cookie.parse(document.cookie).blueking_language : 'zh-cn'
const i18n = new VueI18n({
    // 语言标识
    locale: localeCookie,
    fallbackLocale: 'zh-cn',
    // this.$i18n.locale 通过切换locale的值来实现语言切换
    messages: {
        // 中文语言包
        'zh-cn': Object.assign(require('../language/lang/zh')),
        // 英文语言包
        'en': Object.assign(require('../language/lang/en'))
    }
})
locale.i18n((key, value) => i18n.t(key, value))
export default i18n