vue3中多语言切换vue-i18n

最新推荐文章于 2025-06-12 18:00:19 发布

原创

最新推荐文章于 2025-06-12 18:00:19 发布 · 1.3k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue.js项目中使用vue-i18n库进行国际化设置，包括创建i18n文件夹，配置语言文件，引入并使用i18n在main.ts和组件中，以及如何通过el-select实现语言的动态切换。

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

安装

npm install vue-i18n@next

使用

一.在src中创建i18n文件夹（文件名无所谓）

在i18n下创建 en.ts/js zh.ts/js index.ts/js 分别写入下面代码

en.ts/js

//en
export default {
  message: {
    hello: 'hello',
    name:'name'
  }
}

zh.ts/js

//zh
export default {
  message: {
    hello: '你好',
    name:'姓名'
  }
}

index.ts/js

//index.ts
import { createI18n } from "vue-i18n";
import en from './en'
import zh from './zh';
 
const i18n = createI18n({
  locale:localStorage.getItem('language') || 'zh', // 默认是中文
//   fallbackLocale: 'en', // 语言切换的时候是英文
  globalInjection:true,//全局配置$t
  legacy:false,//vue3写法
  messages:{en,zh}// 需要做国际化的语种,就是刚才编写的两个语言
 
})
 
export de