Vue国际化，使用vue-i18n实现国际化

最新推荐文章于 2025-11-06 15:43:18 发布

原创最新推荐文章于 2025-11-06 15:43:18 发布 · 220 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍如何在Vue项目中实现多语言支持。首先通过npm安装vue-i18n包，然后在main.js中配置语言文件并创建i18n实例。文中展示了如何在组件中使用{{$t}

1.安装vue-ii18n

npm install vue-i18n --save

2.注入vue中，在mian.js修改，并引入i18n翻译模板文件

mian.js代码：

import VueI18n from 'vue-i18n'
import langs from './common/langs/index.i18n'
Vue.use(VueI18n);
const i18n = new VueI18n({
	locale: 'zh-CN',
	messages:{
		'zh-CN': Object.assign(langs.zh,common),
        'en':　 Object.assign(langs.en,common),
	}
})
new Vue({
    i18n,
    render:h=>h(App),
}).$mount('#app')

index.i18n代码：

import './alarm.json'
import './about.json'

{
    "zh":{
        "Alarm_Big_Kai_is_stupid": "大凯是傻逼",
        "Alarm_Big_Dong_Gua_is_erpao": "张栋是二炮"
    },
    en:{
        "Alarm_Big_Kai_is_stupid": "Big Kai is stupid",
        "Alarm_Big_Dong_Gua_is_erpao": "Big Dong Gua is erpao"
    }
}

2.在文件中使用

<div>{{$t('Alarm_Big_Kai_is_stupid')}}</div>
<div>{{$t('Alarm_Big_Dong_Gua_is_erpao')}}</div>
<button @click='changeLang'>切换语言</button>

changeLang(){
    if(this.lang==="zh-CN"){
        this.lang = 'en';
        this.$i18n.locale = this.lang
    }else{
        this.lang = 'zh-CN';
        this.$i18n.locale = this.lang
    }
}