vue-i18n实现国际化

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

面壁思过程

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

阅读量350

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue-i18n实现国际化

本文链接：https://blog.youkuaiyun.com/Candy_mi/article/details/90634364

js 专栏收录该内容

52 篇文章

订阅专栏

博客介绍了使用vue-i18n实现国际化的方法。包括安装vue-i18n，在main.js中引入，建立英文和中文语言包文件，还说明了在组件中通过切换locale的值来实现语言切换。

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

安装vue-i18n

npm install vue-i18n

main.js中引入

import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 通过插件的形式挂载

const i18n = new VueI18n({
    locale: 'zh-CN',    // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
      'zh-CN': require('./common/lang/zh'),   // 中文语言包
      'en-US': require('./common/lang/en')    // 英文语言包
    }
})

建立一个语言包文件lang

en.js 英文语言包：

export const m = { 
  music: 'Music',//网易云音乐
  findMusic: 'FIND MUSIC',//发现音乐
  myMusic: 'MY MUSIC',//我的音乐
  friend: 'FRIEND',//朋友
  musician: 'MUSICIAN',//音乐人
  download: 'DOWNLOAD'//下载客户端
}

zh.js中文语言包：

export const m = {
  music: '网易云音乐',
  findMusic: '发现音乐',
  myMusic: '我的音乐',
  friend: '朋友',
  musician: '音乐人',
  download: '下载客户端'
}

组件中如何去切换 locale 的值，实现语言切换。

locale: 'zh-CN',    // 语言标识
    messages: {
      'zh-CN': require('./common/lang/zh'),   // 中文语言包
      'en-US': require('./common/lang/en')    // 英文语言包
    }

/**
 * 切换语言 
 */ 
 changeLangEvent() {
   this.$confirm('确定切换语言吗?', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
    }).then(() => {
       if ( this.lang === 'zh-CN' ) {
          this.lang = 'en-US';
          this.$i18n.locale = this.lang;//关键语句
       }else {
          this.lang = 'zh-CN';
          this.$i18n.locale = this.lang;//关键语句
       }
    }).catch(() => {
       this.$message({
           type: 'info',
       });          
    });
}