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

news2024/10/7 10:20:53

引入

如何做到

下载i18n库

构建整体翻译文件结构

语言包文件

i18n配置文件

把i18n挂载到vue实例上

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

引入

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

如何做到

下载i18n库

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

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

构建整体翻译文件结构

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

语言包文件

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

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

en.js(英文翻译)

export default {
    messages: {
        //英文的苹果叫apple
        apple:'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 写false
    legacy:false,
    // locale是表示我们当前的语言,你是中文他就会用zh.js,你是英文他就会用en.js
    //本地存储中有就用本地存储中的,没有就默认为en
    locale: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>