页面通过Vue进行整体页面不同语言切换 i18n库

引入

如何做到

下载i18n库

构建整体翻译文件结构

语言包文件

i18n配置文件

把i18n挂载到vue实例上

添加按钮点击事件切换语言

引入

我们现在有这样一个要求,我们想要对我们开发的网页进行国际化操作,也就是我们不仅要有中文,还要有英文等。用户可以随时进行不同语言的切换,页面中页呈现出不同的语言文字。

如何做到

下载i18n库

我们通过i18n这个库来进行操作

我们首先要在我们本地下载这个库：
npm install vue-i18n

构建整体翻译文件结构

我们在我们vue工程目录下的src中新建i18n文件夹,里面的结果如图所示

语言包文件

我们在langs的en.js和zh.js中分别写上如下代码

这两个其实就是我们的语言包,自己定义的,也可以添加更多的,只需要加入js文件,然后写入对应语言即可

en.js(英文翻译)

export default {messages: {//英文的苹果叫appleapple:'apple'}
}

zh.js(中文翻译)

export default {messages: {//中文的苹果叫苹果apple:'苹果'}
}

i18n配置文件

i18n目录下的index.js文件(主要的配置文件)

import { createI18n } from "vue-i18n"
// 英文翻译包
import en from './langs/en'
// 中文翻译包
import zh from './langs/zh'// 把语言包放进去
const messages = {zh,en
}
const i18n = createI18n({// vue2 legacy写false和true就行, vue3 写falselegacy:false,// locale是表示我们当前的语言,你是中文他就会用zh.js,你是英文他就会用en.js//本地存储中有就用本地存储中的,没有就默认为enlocale:localStorage.getItem('lang') || 'en',messages
})export default i18n

把i18n挂载到vue实例上

这里是用的vue3的语法,vue2也一样的,挂载上去就行

import { createApp } from 'vue'
import App from './App.vue'
//这里
import i18n from './i18n';const app = createApp(App)
//这里
app.use(i18n)app.mount('#app')

添加按钮点击事件切换语言

按钮

<button @click="changeLang1('en')">切换到英文</button><button @click="changeLang1('zh')">切换到中文</button>

在vue的script中导入useI18n

import { useI18n } from 'vue-i18n';

点击事件代码

这里是vue3的语法setup,vue2也同理

setup() {// 语言类型对象读取const {locale} = useI18n();const changeLang1 = (type) => {showToast('1s后切换英文语言');setTimeout(() => {locale.value = type;localStorage.setItem('lang',type)location.reload();},1000)// console.log(locale.value);};const changeLang2 = (type) => {showToast('Switch chinese language after 1s');setTimeout(() => {locale.value = type;localStorage.setItem('lang',type)location.reload();},1000)// console.log(locale.value);};return {changeLang1,changeLang2}
}

解释这里的 const {locale} = useI18n() 是什么

我们回到我们的i18n目录下的index文件

我们可以看到,他就是我们的语言包类型!
import { createI18n } from "vue-i18n"
// 英文翻译包
import en from './langs/en'
// 中文翻译包
import zh from './langs/zh'const messages = {zh,en
}
const i18n = createI18n({legacy:false,//这个东西locale:localStorage.getItem('lang') || 'en',messages
})export default i18n
因此，这句代码就是在修改我们的语言包类型
locale.value = type

最后一步,显示在网页上！

在标签之间的话就是

<div>{{ $t('messages.apple') }}</div>

如果是在标签上的话,v-bing,v-model等

<Button :label="$t('messages.apple')"/>

这里的messages就是我们语言包里的东西,apple就是语言包里的标识

注意语言包里的翻译标识在不同语言中的应该是一样的

比如我这里想要翻译的是apple，那么英文包里面的标识是apple,中文包下的也是apple,只是他们的值一个是英文,一个是中文而已
export default {//messages在这messages: {//中文的苹果叫苹果//apple在这apple:'苹果'}
}
当然也可以改成其他的,在里面添加多个,例如

zh.js
export default {big: {a:'哈哈',apple:'苹果'}
}
en.js
export default {big: {a:'haha',apple:'apple'}
}
我们这里调用的时候就应该是
<div>{{ $t('big.a') }}</div>
<div>{{ $t('big.apple') }}</div>