vue使用i18n进行多语言切换

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

浅箬

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

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue.js日常用法记录日常问题总结文章标签： vue语言切换 i18n vue+i18n 多语言

本文链接：https://blog.csdn.net/qq_34458824/article/details/101607668

日常问题总结同时被 2 个专栏收录

32 篇文章

订阅专栏

vue.js日常用法记录

8 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中实现多语言支持，包括安装配置vue-i18n，设置语言包，以及在组件和数据中使用多语言切换。

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

1.尚未安装i18n时需要安装：

npm install vue-i18n

2.在项目的main.js中增加代码：

import Vue from 'vue'
import App from './App'
import router from './router'
import VueI18n from 'vue-i18n'
import $ from 'jquery'
Vue.config.productionTip = false
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en-us',
  messages: {
    'en-us': require('./lang/en-us'),
    'zh-cn': require('./lang/zh-cn'),
    'zh-tw': require('./lang/zh-tw')
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

其中：import VueI18n from 'vue-i18n'对i18n

Vue.use(VueI18n)

进行引入

这里是我对三种语言包路径选择，以及初始语言的默认

这里是我的目录，大家不要把路径弄错了:

3.在相应的语言包中增加自己所需的文本即可：

4.在界面使用已经写好的语言包时也会有一些情况：

（1）、在template中使用，直接{{$t('contact.downLoad')}}即可，如图：

（2）、在data中使用：$t('header.contact')，但是值得注意的是，在进行多语言切换的时候，data中的数据不能及时进行切换。

5、更改默认语言包，使用this.$i18n.locale对自己所选择的语言进行切换即可

changeLanguage () {
    if(this.myVal == 0){
       this.$i18n.locale = 'en-us'
    }else if(this.myVal == 1){
       this.$i18n.locale = 'zh-cn'
    }else{
       this.$i18n.locale = 'zh-tw'
    }
 }