一键切换语言(多语言插件vue-i18n的使用)

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

原创

最新推荐文章于 2025-06-26 09:37:54 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#一键切换语言(多语言插件vue-i18n的使用)

这篇博客介绍了如何在Vue应用中利用vue-i18n插件实现一键切换语言的功能。通过安装插件，全局引入到main.js，然后在组件如Helloworld.vue中使用侦听器监听并响应语言变更，完成多语言环境的切换。完整源码可以在github上查看。

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

实现效果:
在这里插入图片描述
一.安装

cnpm i vue-i18n --save

二.main.js中全局引入

import  VueI18n from 'vue-i18n';
Vue.use(VueI18n)

// vue-i18n其实是一个对象,每种语言对应一个key
const messages={
   
   
  en:{
   
   
    message:{
   
   
      hello:"hello world"
    }
  },
  cn:{
   
   
    message:{
   
   
      hello:"你好"
    }
  }
}

const i18n=new VueI18n({