使用vue-i18n进行简单的中英文切换

最新推荐文章于 2024-06-22 11:03:07 发布

终归墟

最新推荐文章于 2024-06-22 11:03:07 发布

阅读量4.2k

点赞数 4

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/s_9527_s/article/details/124041130

版权

本文介绍如何在Vue.js项目中使用vue-i18n实现简单的中英文切换功能。首先通过npm安装并指定vue-i18n版本，然后在main.js和app.vue中设置和引入语言。接着在页面中监听locale变量变化，通过事件绑定实现动态切换。最后讨论了在实际项目中如何组织语言文件以方便管理和维护。

摘要由CSDN通过智能技术生成

项目中经常有中英文切换的功能，接下来就简单实现以下这个功能

一、下载

这里用到的是npm的方法

npm install vue-i18n

如果下载后用不了可以尝试下降低版本（当然不一定是版本问题，这只是一种思路），下载时指定版本的方法就是在vue-i18n后面加@版本号（例：npm install vue-i18n@8）

下载完成以后可以在 package.json中看到，我这里的版本是8

二、设置语言并引入应用

main.js

import Vue from 'vue'
import App from './App.vue'
import VueI18n from 'vue-i18n' //引入vue-i18n

const messages = { //设置语言
    zh: {//中
      message: {
        hello: '叫我靓仔！'
      }
    },
    en: {//英
      message: {
        hello: 'Call me pretty!'
      }
    }
}
Vue.use(VueI18n)//使用
const i18n = new VueI18n({
	locale: 'zh', // 语言标识 zh为上面messages中的