vue项目中配置多语言

最新推荐文章于 2025-06-26 09:37:54 发布

李晨飞_

最新推荐文章于 2025-06-26 09:37:54 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/m0_59878114/article/details/121300126

vue 专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中集成vue-i18n和Element-UI，实现多语言切换。首先通过npm安装vue-i18n和相关语言包，接着在配置文件中设置中文和英文的语言信息，然后在main.js中导入并挂载多语言实例，最后展示如何切换地区查看不同语言效果。

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

1 首先安转多语言的依赖包

npm i vue-i18n@8.22.2

2 进行多语言设置

// 导入 Vue
import Vue from 'vue'

// 导入 vue-i18n 插件
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale' // 导入 Element 语言配置插件
import enLocale from 'element-ui/lib/locale/lang/en' // 导入 Element 英文包
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // 导入 Element 中文包

Vue.use(VueI18n)

// 创建国际化插件的实例
const i18n = new VueI18n({
  locale: 'zh', // 设置地区，zh 表示中国地区
  // 设置地区信息
  messages: {
    en: {
      ...enLocale
    },
    zh: {
      ...zhLocale
    }
  }
})

// 配置 Element 语言转换关系
locale.i18n((key, value) => i18n.t(key, value))

export default i18n

3 在 main.js 入口文件导入多语言设置

// 多语言配置
import i18n from '@/lang

4 在 Vue 实例中挂载多语言设置

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

5 在配置语言的文件中，切换地区语言查看

// 创建国际化插件的实例
const i18n = new VueI18n({
  // 切换成 en 查看标题效果
  locale: 'zh', // 设置地区，zh 表示中国地区
  // 其他代码略
})