vue使用I18n

柒柒兮

已于 2022-02-25 16:14:56 修改

阅读量2.6k

点赞数

文章标签： vue.js javascript 前端

于 2022-02-25 16:13:47 首次发布

本文链接：https://blog.youkuaiyun.com/qq_28948031/article/details/123135235

版权

本文详细介绍了在Vue.js项目中如何设置和使用I18n进行多语言支持，包括安装必要的库，配置main.js以及创建i18n.js文件的详细步骤。

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

1.安装

npm install vue-i18n  / yarn add vue-i18n

2.main.js

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

Vue.use(VueI18n)

3.i18n.js

import { createI18n } from 'vue-i18n';
// 引入各个语言配置文件
import en from './locales/en';
import zh_CN from './locales/zh-cn';

const i18n =  createI18n({
	// legacy: false, // Composition API 模式
	  globalInjection: true, // 全局注册 $t方法
	  locale: localStorage.getItem('language') || 'zh_CN',
	  messages: {
	    zh_CN,
	    en,
	  },
});
export default i18n;

## 4.注意


```bash
//i18n 版本小于9的 直接使用$t 可以获取字符串 数组 对象
<div>
 {{$t('content.aboutMes.contentTit1')}}
 </div>
 <div>
   <ul>
     <li v-for="item in $t('content.aboutMes.conBoArr')">
       <img :src="item.imgUrl" alt="">
       <div>{{item.tit}}</div>
     </li>
   </ul>
 </div>
 //i18n 版本>=9 **字符串获取使用$t 数组获取使用$tm**
 <div>
 {{$t('content.aboutMes.contentTit1')}}
 </div>
 <div>
   <ul>
     <li v-for="item in $tm('content.aboutMes.conBoArr')">
       <img :src="item.imgUrl" alt="">
       <div>{{item.tit}}</div>
     </li>
   </ul>
 </div>

**//vue2 在方法中获取值**
this.$t('content.aboutMes.contentTit1')
this.$t('content.aboutMes.conBoArr')

**//vue3 在setup中获取值**
import { useI18n } from 'vue-i18n'
const { locale,t,tm } = useI18n();//t:获取字符串 tm获取数组
t('content.aboutMes.contentTit1')
tm('content.aboutMes.conBoArr')