【vue】使用vue-i18n实现国际化，获取浏览器默认语言

使用Vue-I18n实现多语言切换

最新推荐文章于 2025-06-30 17:22:17 发布

一棵星星

最新推荐文章于 2025-06-30 17:22:17 发布

阅读量5.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_41612593/article/details/125164384

vue 专栏收录该内容

5 篇文章

订阅专栏

这段代码展示了如何在Vue应用中使用vue-i18n库来实现多语言支持。它首先导入Vue和VueI18n，然后根据浏览器的language属性设置默认语言。如果找不到本地语言，则从localStorage读取或设置为'enUS'。接着，定义了i18n实例，加载了不同语言的本地化消息文件。最后，导出了i18n实例供Vue应用使用。

index.js文件的相关代码如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const navLang = navigator.language || navigator.userLanguage
let localLang = navLang || false
let lang = localLang || localRead('local') || 'enUS'
localStorage.setItem('lang', localLang)

const i18n = new VueI18n({
    locale: lang, // 语言标识
    messages: {
        'zhCN': require('./zh-CN.js'),
        'zhTW': require('./zh-TW.js'),
        'enUS': require('./en-US.js')
    }
})

export default i18n