vue3和ts使用i18n实现国际化与动态切换语言

女爷i 2023-10-12 12:32 20阅读 0赞

![63dc935a9ae346b9bfa4f80764482ff0.png][]i18n官网：[Installation | Vue I18n][Installation _ Vue I18n]

vue项目里多语言工具一直用的vue-i18n。  
以前用的 vue2，也没啥大问题，就是配置好之后用t(“你的属性名”)就行，现在用vue3其实本来也没太大变化。

## 安装 ##

npm install vue-i18n@next
    
    或者
    
    yarn add vue-i18n@next
    
    或者
    
    pnpm install vue-i18n@next

## 配置到项目中 ##

在 src 目录下新建 lang 文件夹，并包含index.ts , *lang / en.ts* , *lang / zh.ts*(做中英文切换)

各个文件内容如下

en.ts:

export default {
        login: {
            login: 'login',
            userName: 'userName',
            password: 'password',
        },
        captcha: 'Captcha',
        forgetPassword: 'Forget Password?',
        loginTip: 'The login result is random. Just fill in the captcha',
        editpassword: 'Edit Password',
        logout: 'Logout',
        errMsg: {
            inputRequired: 'Please Input {cont}',
            selectRequired: 'Please Select {cont}',
        },
    }

zh.ts:

export default {
        login: {
            login: '登录',
            userName: '用户名',
            password: '密码',
        },
        captcha: '验证码',
        forgetPassword: '忘记密码了？',
        loginTip: '当前登录结果随机。验证码随便填',
        editpassword: '修改密码',
        logout: '退出登录',
        errMsg: {
            inputRequired: '请输入{cont}',
            selectRequired: '请选择{cont}',
        },
    }

index.ts:

// index.ts
    import { createI18n } from 'vue-i18n'
    import zh from './zh'
    import en from './en'
    
    const messages = {
        en,
        zh,
    }
    const language = (navigator.language || 'en').toLocaleLowerCase() // 这是获取浏览器的语言
    const i18n = createI18n({
        locale: localStorage.getItem('lang') || language.split('-')[0] || 'en', // 首先从缓存里拿，没有的话就用浏览器语言，
        fallbackLocale: 'zh', // 设置备用语言
        messages,
        legacy: false,
        globalInjection:true,
    })
    
    export default i18n

最后在main.ts引入就好了:

import i18n from './lang/index'
    import { createApp } from "vue";
    
    
    // 国际化: 其他部分省略
    const app = createApp(App)
    app.use(i18n)

我的main.ts文件里面有很多东西，不适合你拷贝，按照你的需求自己添加就好![39f5641039e1451eac4e578c3045a7ee.png][]

## 使用 ##

1.在<template>中使用

要用到一个$t()的方法，或者使用v-t也行

<div>
       {
       { $t('login.userName') }}
     </div>
     <div v-t="'login.password'"></div>

关于`$t()`还有很多用法，可以动态传参等，具体还是去官网看：[Composition API | Vue I18n][Composition API _ Vue I18n]

2.在setup中使用

还有其他的就不展开了

3.切换语言

vue-i18n提供了一个全局变量locale，直接修改即可

<template>
        <div class="menu">
            <div  @click="changeLang('en')">English</div>
            <div  @click="changeLang('zh')">中文</div>
        </div>
    </template>
    <script setup lang="ts">
    import { useI18n } from 'vue-i18n'
    const { locale } = useI18n()
    
    const changeLang = (lang: string) => {
      locale.value = lang
      localStorage.setItem('lang', lang)
    }
    </script>

[63dc935a9ae346b9bfa4f80764482ff0.png]: https://img-blog.csdnimg.cn/63dc935a9ae346b9bfa4f80764482ff0.png
[Installation _ Vue I18n]: https://vue-i18n.intlify.dev/guide/installation.html
[39f5641039e1451eac4e578c3045a7ee.png]: https://img-blog.csdnimg.cn/39f5641039e1451eac4e578c3045a7ee.png
[Composition API _ Vue I18n]: https://vue-i18n.intlify.dev/guide/advanced/composition.html